1@import "../css3.less"; 2.mblCube { 3 .animation-duration(.8s); 4 .animation-timing-function(linear); 5} 6.mblCube.mblOut { 7 .animation-name(mblCubeOut); 8 .transform-origin(0% 50% ) !important; 9} 10.mblCube.mblIn { 11 .animation-name(mblCubeIn); 12 .transform-origin(100% 50% ) !important; 13} 14@-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)); } 15@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)); } 16@-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)); } 17@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)); } 18.mblCube.mblOut.mblReverse { 19 .animation-name(mblCubeOutReverse); 20 .transform-origin(100% 50% ) !important; 21} 22.mblCube.mblIn.mblReverse { 23 .animation-name(mblCubeInReverse); 24 .transform-origin(0% 50% ) !important; 25} 26@-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)); } 27@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)); } 28@-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)); } 29@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)); } 30 31.dj_ios .mblCube { 32 .transform-style(preserve-3d) !important; 33} 34.dj_ios .mblCube.mblOut { 35 .animation-name(mblCubeOut_iphone); 36 .transform-origin(50% 50% ) !important; 37} 38.dj_ios .mblCube.mblIn { 39 .animation-name(mblCubeIn_iphone); 40 .transform-origin(50% 50% ) !important; 41} 42@-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)); } 43@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)); } 44@-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)); } 45@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)); } 46.dj_ios.dj_landscape .mblCube.mblOut { 47 .animation-name(mblCubeOut_iphone_l); 48 .transform-origin(50% 50% ) !important; 49} 50.dj_ios.dj_landscape .mblCube.mblIn { 51 .animation-name(mblCubeIn_iphone_l); 52 .transform-origin(50% 50% ) !important; 53} 54@-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)); } 55@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)); } 56@-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)); } 57@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)); } 58.dj_ios .mblCube.mblOut.mblReverse { 59 .animation-name(mblCubeOutReverse_iphone); 60 .transform-origin(50% 50% ) !important; 61} 62.dj_ios .mblCube.mblIn.mblReverse { 63 .animation-name(mblCubeInReverse_iphone); 64 .transform-origin(50% 50% ) !important; 65} 66@-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)); } 67@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)); } 68@-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)); } 69@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)); } 70.dj_ios.dj_landscape .mblCube.mblOut.mblReverse { 71 .animation-name(mblCubeOutReverse_iphone_l); 72 .transform-origin(50% 50% ) !important; 73} 74.dj_ios.dj_landscape .mblCube.mblIn.mblReverse { 75 .animation-name(mblCubeInReverse_iphone_l); 76 .transform-origin(50% 50% ) !important; 77} 78@-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)); } 79@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)); } 80@-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)); } 81@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)); } 82 83.dj_ipad.dj_ios .mblCube.mblOut { 84 .animation-name(mblCubeOut_ipad); 85 .transform-origin(50% 50% ) !important; 86} 87.dj_ipad.dj_ios .mblCube.mblIn { 88 .animation-name(mblCubeIn_ipad); 89 .transform-origin(50% 50% ) !important; 90} 91@-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)); } 92@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)); } 93@-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)); } 94@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)); } 95.dj_ipad.dj_ios.dj_landscape .mblCube.mblOut { 96 .animation-name(mblCubeOut_ipad_l); 97 .transform-origin(50% 50% ) !important; 98} 99.dj_ipad.dj_ios.dj_landscape .mblCube.mblIn { 100 .animation-name(mblCubeIn_ipad_l); 101 .transform-origin(50% 50% ) !important; 102} 103@-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)); } 104@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)); } 105@-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)); } 106@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)); } 107.dj_ipad.dj_ios .mblCube.mblOut.mblReverse { 108 .animation-name(mblCubeOutReverse_ipad); 109 .transform-origin(50% 50% ) !important; 110} 111.dj_ipad.dj_ios .mblCube.mblIn.mblReverse { 112 .animation-name(mblCubeInReverse_ipad); 113 .transform-origin(50% 50% ) !important; 114} 115@-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)); } 116@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)); } 117@-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)); } 118@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)); } 119.dj_ipad.dj_ios.dj_landscape .mblCube.mblOut.mblReverse { 120 .animation-name(mblCubeOutReverse_ipad_l); 121 .transform-origin(50% 50% ) !important; 122} 123.dj_ipad.dj_ios.dj_landscape .mblCube.mblIn.mblReverse { 124 .animation-name(mblCubeInReverse_ipad_l); 125 .transform-origin(50% 50% ) !important; 126} 127@-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)); } 128@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)); } 129@-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)); } 130@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)); } 131