metrojs/src/less/bounce.less

Metro JS is a plugin to help make Metro ( also known as flat or modern ) interfaces on the web. Example features include Live Tiles that can fade, flip, slide at custom points or in a carousel. Theme and accent colors are supported along with custom tile

.bounce
{
    cursor: pointer;
    outline: 1px solid transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin:50% 50%;
    -moz-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    -o-transform-origin:50% 50%;
    transform-origin:50% 50%;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    transform-style:preserve-3d;
        
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden;        

    &.bounce-c
    {
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.95,M12=0,M21=0,M22=0.95);            
        -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -o-transform: scale(0.95);
        transform: scale(0.95);
    }

    &.bounce-t
    {
        -webkit-transform: rotateX(20deg);
        -ms-transform: rotateX(20deg);
        -moz-transform: rotateX(20deg);
        -o-transform: rotateX(20deg);
        transform: rotateX(20deg);
        -webkit-transform-origin:0% 100%;
        -moz-transform-origin:0% 100%;
        -ms-transform-origin:0% 100%;
        -o-transform-origin:0% 100%;
        transform-origin:0% 100%;
    }

    &.bounce-b
    {
        -webkit-transform: rotateX(-20deg);
        -ms-transform: rotateX(-20deg);
        -moz-transform: rotateX(-20deg);
        -o-transform: rotateX(-20deg);
        transform: rotateX(-20deg);
        -webkit-transform-origin:50% 0%;
        -moz-transform-origin:50% 0%;
        -ms-transform-origin:50% 0%;
        -o-transform-origin:50% 0%;
        transform-origin:50% 0%;
    }

    &.bounce-r
    {
        -webkit-transform: rotateY(20deg);
        -ms-transform: rotateY(20deg);
        -moz-transform: rotateY(20deg);
        -o-transform: rotateY(20deg);
        transform: rotateY(20deg);
        -webkit-transform-origin:0% 50%;
        -moz-transform-origin:0% 50%;
        -ms-transform-origin:0% 50%;
        -o-transform-origin:0% 50%;
        transform-origin:0% 50%;
    }

    &.bounce-l
    {
        -webkit-transform: rotateY(-20deg);
        -ms-transform: rotateY(-20deg);
        -moz-transform: rotateY(-20deg);
        -o-transform: rotateY(-20deg);
        transform: rotateY(-20deg);
        -webkit-transform-origin:100% 50%;
        -moz-transform-origin:100% 50%;
        -ms-transform-origin:100% 50%;
        -o-transform-origin:100% 50%;
        transform-origin:100% 50%;
    }
    &.bounce-tl
    {
        -webkit-transform: rotateX(10deg) rotateY(-10deg);
        -ms-transform: rotateX(10deg) rotateY(-10deg);
        -moz-transform: rotateX(10deg) rotateY(-10deg);
        -o-transform: rotateX(10deg) rotateY(-10deg);
        transform: rotateX(10deg) rotateY(-10deg);
    }
    &.bounce-tr
    {            
        -webkit-transform: rotateX(10deg) rotateY(10deg);
        -ms-transform: rotateX(10deg) rotateY(10deg);
        -moz-transform: rotateX(10deg) rotateY(10deg);
        -o-transform: rotateX(10deg) rotateY(10deg);
        transform: rotateX(10deg) rotateY(10deg);
    }
    &.bounce-bl
    {
        -webkit-transform: rotateX(-10deg) rotateY(-10deg);
        -ms-transform: rotateX(-10deg) rotateY(-10deg);
        -moz-transform: rotateX(-10deg) rotateY(-10deg);
        -o-transform: rotateX(-10deg) rotateY(-10deg);
        transform: rotateX(-10deg) rotateY(-10deg);
    }
    &.bounce-br
    {
        -webkit-transform: rotateX(-10deg) rotateY(10deg);
        -ms-transform: rotateX(-10deg) rotateY(10deg);
        -moz-transform: rotateX(-10deg) rotateY(10deg);
        -o-transform: rotateX(-10deg) rotateY(10deg);
        transform: rotateX(-10deg) rotateY(10deg);
    }
}