More control to animate objects with CSS animation properties and keyframes. Declared animations.
Example
Example of an animation effect in 3D, using the @-webkit-keyframes at-rule with -webkit-animation properties.
@-webkit-keyframes rotateCube { 0% { -webkit-transform: rotateX(0) rotateY(0);} 50% { -webkit-transform: rotateX(180deg) rotateY(180deg);} 100%{ -webkit-transform: rotateX(360deg) rotateY(360deg);} } #stage { position: relative; height: 150px; width: 100px; } #cube { -webkit-transform-style: preserve-3d; -webkit-animation: rotateCube 15s linear; } .face { position: absolute; opacity: .8; } .f1 { -webkit-transform: translateZ(90px); } .f2 { -webkit-transform: rotateX(90deg) translateZ(90px); } .f3 { -webkit-transform: rotateX(-90deg) translateZ(90px); } .f4 { -webkit-transform: rotateY(90deg) translateZ(90px); } .f4 { -webkit-transform: rotateY(90deg) translateZ(90px); } .f5 { -webkit-transform: rotateY(180deg) translateZ(90px); }