@import "../css3.less"; .mblCube { .animation-duration(.8s); .animation-timing-function(linear); } .mblCube.mblOut { .animation-name(mblCubeOut); .transform-origin(0% 50% ) !important; } .mblCube.mblIn { .animation-name(mblCubeIn); .transform-origin(100% 50% ) !important; } @-webkit-keyframes mblCubeOut { .keyframes-transform-0-50-100-webkit(scale(1,1) skew(0deg,0deg), scale(.5,1) skew(0deg,3deg), scale(0,1) skew(0deg,0deg)); } @keyframes mblCubeOut { .keyframes-transform-0-50-100 (scale(1,1) skew(0deg,0deg), scale(.5,1) skew(0deg,3deg), scale(0,1) skew(0deg,0deg)); } @-webkit-keyframes mblCubeIn { .keyframes-transform-0-50-100-webkit(scale(0,1) skew(0deg,0deg), scale(.5,1) skew(0deg,-3deg), scale(1,1) skew(0deg,0deg)); } @keyframes mblCubeIn { .keyframes-transform-0-50-100 (scale(0,1) skew(0deg,0deg), scale(.5,1) skew(0deg,-3deg), scale(1,1) skew(0deg,0deg)); } .mblCube.mblOut.mblReverse { .animation-name(mblCubeOutReverse); .transform-origin(100% 50% ) !important; } .mblCube.mblIn.mblReverse { .animation-name(mblCubeInReverse); .transform-origin(0% 50% ) !important; } @-webkit-keyframes mblCubeOutReverse { .keyframes-transform-0-50-100-webkit(scale(1,1) skew(0deg,0deg), scale(.5,1) skew(0deg,-3deg), scale(0,1) skew(0deg,0deg)); } @keyframes mblCubeOutReverse { .keyframes-transform-0-50-100 (scale(1,1) skew(0deg,0deg), scale(.5,1) skew(0deg,-3deg), scale(0,1) skew(0deg,0deg)); } @-webkit-keyframes mblCubeInReverse { .keyframes-transform-0-50-100-webkit(scale(0,1) skew(0deg,0deg), scale(.5,1) skew(0deg,3deg), scale(1,1) skew(0deg,0deg)); } @keyframes mblCubeInReverse { .keyframes-transform-0-50-100 (scale(0,1) skew(0deg,0deg), scale(.5,1) skew(0deg,3deg), scale(1,1) skew(0deg,0deg)); } .dj_ios .mblCube { .transform-style(preserve-3d) !important; } .dj_ios .mblCube.mblOut { .animation-name(mblCubeOut_iphone); .transform-origin(50% 50% ) !important; } .dj_ios .mblCube.mblIn { .animation-name(mblCubeIn_iphone); .transform-origin(50% 50% ) !important; } @-webkit-keyframes mblCubeOut_iphone { .keyframes-transform-from-to-webkit(scale3d(0.835,0.835,0.835) rotateY(0deg) translateZ(160px), scale3d(0.835,0.835,0.835) rotateY(-90deg) translateZ(160px)); } @keyframes mblCubeOut_iphone { .keyframes-transform-from-to (scale3d(0.835,0.835,0.835) rotateY(0deg) translateZ(160px), scale3d(0.835,0.835,0.835) rotateY(-90deg) translateZ(160px)); } @-webkit-keyframes mblCubeIn_iphone { .keyframes-transform-from-to-webkit(scale3d(0.835,0.835,0.835) rotateY(90deg) translateZ(160px), scale3d(0.835,0.835,0.835) rotateY(0deg) translateZ(160px)); } @keyframes mblCubeIn_iphone { .keyframes-transform-from-to (scale3d(0.835,0.835,0.835) rotateY(90deg) translateZ(160px), scale3d(0.835,0.835,0.835) rotateY(0deg) translateZ(160px)); } .dj_ios.dj_landscape .mblCube.mblOut { .animation-name(mblCubeOut_iphone_l); .transform-origin(50% 50% ) !important; } .dj_ios.dj_landscape .mblCube.mblIn { .animation-name(mblCubeIn_iphone_l); .transform-origin(50% 50% ) !important; } @-webkit-keyframes mblCubeOut_iphone_l { .keyframes-transform-from-to-webkit(scale3d(0.77,0.77,0.77) rotateY(0deg) translateZ(240px), scale3d(0.77,0.77,0.77) rotateY(-90deg) translateZ(240px)); } @keyframes mblCubeOut_iphone_l { .keyframes-transform-from-to (scale3d(0.77,0.77,0.77) rotateY(0deg) translateZ(240px), scale3d(0.77,0.77,0.77) rotateY(-90deg) translateZ(240px)); } @-webkit-keyframes mblCubeIn_iphone_l { .keyframes-transform-from-to-webkit(scale3d(0.77,0.77,0.77) rotateY(90deg) translateZ(240px), scale3d(0.77,0.77,0.77) rotateY(0deg) translateZ(240px)); } @keyframes mblCubeIn_iphone_l { .keyframes-transform-from-to (scale3d(0.77,0.77,0.77) rotateY(90deg) translateZ(240px), scale3d(0.77,0.77,0.77) rotateY(0deg) translateZ(240px)); } .dj_ios .mblCube.mblOut.mblReverse { .animation-name(mblCubeOutReverse_iphone); .transform-origin(50% 50% ) !important; } .dj_ios .mblCube.mblIn.mblReverse { .animation-name(mblCubeInReverse_iphone); .transform-origin(50% 50% ) !important; } @-webkit-keyframes mblCubeOutReverse_iphone { .keyframes-transform-from-to-webkit(scale3d(0.835,0.835,0.835) rotateY(0deg) translateZ(160px), scale3d(0.835,0.835,0.835) rotateY(90deg) translateZ(160px)); } @keyframes mblCubeOutReverse_iphone { .keyframes-transform-from-to (scale3d(0.835,0.835,0.835) rotateY(0deg) translateZ(160px), scale3d(0.835,0.835,0.835) rotateY(90deg) translateZ(160px)); } @-webkit-keyframes mblCubeInReverse_iphone { .keyframes-transform-from-to-webkit(scale3d(0.835,0.835,0.835) rotateY(-90deg) translateZ(160px), scale3d(0.835,0.835,0.835) rotateY(0deg) translateZ(160px)); } @keyframes mblCubeInReverse_iphone { .keyframes-transform-from-to (scale3d(0.835,0.835,0.835) rotateY(-90deg) translateZ(160px), scale3d(0.835,0.835,0.835) rotateY(0deg) translateZ(160px)); } .dj_ios.dj_landscape .mblCube.mblOut.mblReverse { .animation-name(mblCubeOutReverse_iphone_l); .transform-origin(50% 50% ) !important; } .dj_ios.dj_landscape .mblCube.mblIn.mblReverse { .animation-name(mblCubeInReverse_iphone_l); .transform-origin(50% 50% ) !important; } @-webkit-keyframes mblCubeOutReverse_iphone_l { .keyframes-transform-from-to-webkit(scale3d(0.77,0.77,0.77) rotateY(0deg) translateZ(240px), scale3d(0.77,0.77,0.77) rotateY(90deg) translateZ(240px)); } @keyframes mblCubeOutReverse_iphone_l { .keyframes-transform-from-to (scale3d(0.77,0.77,0.77) rotateY(0deg) translateZ(240px), scale3d(0.77,0.77,0.77) rotateY(90deg) translateZ(240px)); } @-webkit-keyframes mblCubeInReverse_iphone_l { .keyframes-transform-from-to-webkit(scale3d(0.77,0.77,0.77) rotateY(-90deg) translateZ(240px), scale3d(0.77,0.77,0.77) rotateY(0deg) translateZ(240px)); } @keyframes mblCubeInReverse_iphone_l { .keyframes-transform-from-to (scale3d(0.77,0.77,0.77) rotateY(-90deg) translateZ(240px), scale3d(0.77,0.77,0.77) rotateY(0deg) translateZ(240px)); } .dj_ipad.dj_ios .mblCube.mblOut { .animation-name(mblCubeOut_ipad); .transform-origin(50% 50% ) !important; } .dj_ipad.dj_ios .mblCube.mblIn { .animation-name(mblCubeIn_ipad); .transform-origin(50% 50% ) !important; } @-webkit-keyframes mblCubeOut_ipad { .keyframes-transform-from-to-webkit(scale3d(0.806,0.806,0.806) rotateY(0deg) translateZ(384px), scale3d(0.806,0.806,0.806) rotateY(-90deg) translateZ(384px)); } @keyframes mblCubeOut_ipad { .keyframes-transform-from-to (scale3d(0.806,0.806,0.806) rotateY(0deg) translateZ(384px), scale3d(0.806,0.806,0.806) rotateY(-90deg) translateZ(384px)); } @-webkit-keyframes mblCubeIn_ipad { .keyframes-transform-from-to-webkit(scale3d(0.806,0.806,0.806) rotateY(90deg) translateZ(384px), scale3d(0.806,0.806,0.806) rotateY(0deg) translateZ(384px)); } @keyframes mblCubeIn_ipad { .keyframes-transform-from-to (scale3d(0.806,0.806,0.806) rotateY(90deg) translateZ(384px), scale3d(0.806,0.806,0.806) rotateY(0deg) translateZ(384px)); } .dj_ipad.dj_ios.dj_landscape .mblCube.mblOut { .animation-name(mblCubeOut_ipad_l); .transform-origin(50% 50% ) !important; } .dj_ipad.dj_ios.dj_landscape .mblCube.mblIn { .animation-name(mblCubeIn_ipad_l); .transform-origin(50% 50% ) !important; } @-webkit-keyframes mblCubeOut_ipad_l { .keyframes-transform-from-to-webkit(scale3d(0.758,0.758,0.758) rotateY(0deg) translateZ(512px), scale3d(0.758,0.758,0.758) rotateY(-90deg) translateZ(512px)); } @keyframes mblCubeOut_ipad_l { .keyframes-transform-from-to (scale3d(0.758,0.758,0.758) rotateY(0deg) translateZ(512px), scale3d(0.758,0.758,0.758) rotateY(-90deg) translateZ(512px)); } @-webkit-keyframes mblCubeIn_ipad_l { .keyframes-transform-from-to-webkit(scale3d(0.758,0.758,0.758) rotateY(90deg) translateZ(512px), scale3d(0.758,0.758,0.758) rotateY(0deg) translateZ(512px)); } @keyframes mblCubeIn_ipad_l { .keyframes-transform-from-to (scale3d(0.758,0.758,0.758) rotateY(90deg) translateZ(512px), scale3d(0.758,0.758,0.758) rotateY(0deg) translateZ(512px)); } .dj_ipad.dj_ios .mblCube.mblOut.mblReverse { .animation-name(mblCubeOutReverse_ipad); .transform-origin(50% 50% ) !important; } .dj_ipad.dj_ios .mblCube.mblIn.mblReverse { .animation-name(mblCubeInReverse_ipad); .transform-origin(50% 50% ) !important; } @-webkit-keyframes mblCubeOutReverse_ipad { .keyframes-transform-from-to-webkit(scale3d(0.806,0.806,0.806) rotateY(0deg) translateZ(384px), scale3d(0.806,0.806,0.806) rotateY(90deg) translateZ(384px)); } @keyframes mblCubeOutReverse_ipad { .keyframes-transform-from-to (scale3d(0.806,0.806,0.806) rotateY(0deg) translateZ(384px), scale3d(0.806,0.806,0.806) rotateY(90deg) translateZ(384px)); } @-webkit-keyframes mblCubeInReverse_ipad { .keyframes-transform-from-to-webkit(scale3d(0.806,0.806,0.806) rotateY(-90deg) translateZ(384px), scale3d(0.806,0.806,0.806) rotateY(0deg) translateZ(384px)); } @keyframes mblCubeInReverse_ipad { .keyframes-transform-from-to (scale3d(0.806,0.806,0.806) rotateY(-90deg) translateZ(384px), scale3d(0.806,0.806,0.806) rotateY(0deg) translateZ(384px)); } .dj_ipad.dj_ios.dj_landscape .mblCube.mblOut.mblReverse { .animation-name(mblCubeOutReverse_ipad_l); .transform-origin(50% 50% ) !important; } .dj_ipad.dj_ios.dj_landscape .mblCube.mblIn.mblReverse { .animation-name(mblCubeInReverse_ipad_l); .transform-origin(50% 50% ) !important; } @-webkit-keyframes mblCubeOutReverse_ipad_l { .keyframes-transform-from-to-webkit(scale3d(0.758,0.758,0.758) rotateY(0deg) translateZ(512px), scale3d(0.758,0.758,0.758) rotateY(90deg) translateZ(512px)); } @keyframes mblCubeOutReverse_ipad_l { .keyframes-transform-from-to (scale3d(0.758,0.758,0.758) rotateY(0deg) translateZ(512px), scale3d(0.758,0.758,0.758) rotateY(90deg) translateZ(512px)); } @-webkit-keyframes mblCubeInReverse_ipad_l { .keyframes-transform-from-to-webkit(scale3d(0.758,0.758,0.758) rotateY(-90deg) translateZ(512px), scale3d(0.758,0.758,0.758) rotateY(0deg) translateZ(512px)); } @keyframes mblCubeInReverse_ipad_l { .keyframes-transform-from-to (scale3d(0.758,0.758,0.758) rotateY(-90deg) translateZ(512px), scale3d(0.758,0.758,0.758) rotateY(0deg) translateZ(512px)); }