dojox/mobile/themes/common/transitions/cube.css

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

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