CSS 3D cube infinite rotation
HTML
<!--
Inspired by
http://www.paulrhayes.com/experiments/cube-3d/
-->
<div id="cube-wrapper">
<div id="cube">
<div class="face one">
x
</div>
<div class="face two">
∫
</div>
<div class="face three">
+
</div>
<div class="face four">
-
</div>
<div class="face five">
^0^ ∞
</div>
<div class="face six">
%
</div>
</div>
</div>
CSS
@-webkit-keyframes rotating {
from {
-webkit-transform: rotateX(-10deg) rotateY(20deg); }
to {
-webkit-transform: rotateX(-10deg) rotateY(380deg); }
}
#cube-wrapper {
-webkit-perspective: 800;
-moz-perspective: 800px;
-o-perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
margin-top: 30px;
margin-bottom: 100px;
}
#cube-wrapper{
margin-top: 100px;
}
#cube-wrapper #cube {
height: 200px;
width: 200px;
-webkit-transform: rotateX(-10deg) rotateY(20deg);
-moz-transform: rotateX(-10deg) rotateY(20deg);
-o-transform: rotateX(-10deg) rotateY(20deg);
transform: rotateX(-10deg) rotateY(20deg);
-webkit-animation: rotating 5s linear infinite;
position: relative;
margin: 0 auto;
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
transition: transform 1s ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; }
#cube-wrapper #cube .face {
width: 200px;
height: 200px; }
#cube-wrapper #cube .one {
-moz-transform: rotateX(90deg) translateZ(100px);
-o-transform: rotateX(90deg) translateZ(100px);
-webkit-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px); }
#cube-wrapper #cube .two {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px); }
#cube-wrapper #cube .three {
-webkit-transform: rotateY(90deg) translateZ(100px);
-moz-transform: rotateY(90deg) translateZ(100px);
-o-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px); }
#cube-wrapper #cube .four {
...