CSS3 3d Rubik's Cube

<style><!--
@charset "UTF-8"; * {margin:0; padding:0} html,body{width:100%; height:100%;
}
. container {text-align:center; margin:50px auto; width:200px;
}
. cube {transform-style:preserve-3d;-webkit-transform-origin:54px 54px 54px;-moz-transform-origin:54px 54px 54px;-ms -transform-origin:54px 54px 54px; -o-transform-origin:54px 54px 54px; transform-origin:54px 54px 54px; -webkit-animation:cube ease-in-out 6s Infinite forwards; -o-animation:cube ease-in-out 6s Infinite forwards; Animation:cube ease-in-out 6s Infinite forwards;
} @keyframes cube {from, to {
} 16% {Transform:rotatey ( -90deg);
} 33% {Transform:rotatey ( -90deg) Rotatez (135deg);
} 50% {Transform:rotatey (225deg) Rotatez (135deg);
} 66% {Transform:rotatey (135deg) Rotatex (135deg);
} 83% {Transform:rotatex (135deg);
}
}
. page {width:108px; height:108px; position:absolute;
}
. page. row {width:108px; height:36px; float:left;
}
. page span {display:inline-block; width:30px; height:30px; border:3px solid #000; border-radius:5px;
}
. Up {-webkit-transform:translatey (54px) Rotatex (90deg),-moz-transform:translatey (54px) Rotatex (90deg); Ms-transform:translatey (54px) Rotatex (90deg); -o-transform:translatey (54px) Rotatex (90deg); Transform:translatey (54px) Rotatex (90deg);
}
. Down {-webkit-transform:translatey ( -54px) Rotatex ( -90deg);-moz-transform:translatey ( -54px) RotateX ( -90deg);- Ms-transform:translatey ( -54px) Rotatex ( -90deg); -o-transform:translatey ( -54px) Rotatex ( -90deg); Transform:translatey ( -54px) Rotatex ( -90deg);
}
. Front {-webkit-transform:translatez (54px);-moz-transform:translatez (54px);-ms-transform:translatez (54px);- O-transform:translatez (54PX); Transform:translatez (54PX);
}
. back {-webkit-transform:translatez ( -54px);-moz-transform:translatez ( -54px);-ms-transform:translatez ( -54px);- O-transform:translatez ( -54PX); Transform:translatez ( -54PX);
}
. Left {-webkit-transform:translatex ( -54px) Rotatey ( -90deg);-moz-transform:translatex ( -54px) RotateY ( -90deg);- Ms-transform:translatex ( -54px) Rotatey ( -90deg); -o-transform:translatex ( -54px) Rotatey ( -90deg); Transform:translatex ( -54px) Rotatey ( -90deg);
}
. Right {-webkit-transform:translatex (54px) Rotatey (90deg),-moz-transform:translatex (54px) Rotatey (90deg); Ms-transform:translatex (54px) Rotatey (90deg); -o-transform:translatex (54px) Rotatey (90deg); Transform:translatex (54px) Rotatey (90deg);
} span.white {Background:white} span.yellow {Background:yellow} span.blue {Background:blue} span.green {Backgrou Nd:green} span.orange {Background:orange} span.red {background:red}
--></style>
<!--yellow White front blue green Left orange right red---

<div id= "container" class= "container" >
<div id= "Cube" class= "Cube" >
<div id= "Up" class= "Page Up" >
<div class= "Row row1" ><span class= "yellow" ></span><span class= "Yellow" ></span>< span class= "Yellow" ></span></div>
<div class= "Row row2" ><span class= "yellow" ></span><span class= "Yellow" ></span>< span class= "Yellow" ></span></div>
<div class= "Row row3" ><span class= "yellow" ></span><span class= "Yellow" ></span>< span class= "Yellow" ></span></div>
</div>
<div id= "Down" class= "Page Down" >
<div class= "Row row1" ><span class= "white" ></span><span class= "white" ></span><span class= "White" ></span></div>
<div class= "Row row2" ><span class= "white" ></span><span class= "white" ></span><span class= "White" ></span></div>
<div class= "Row row3" ><span class= "white" ></span><span class= "white" ></span><span class= "White" ></span></div>
</div>
<div id= "front" class= "page front" >
<div class= "Row row1" ><span class= "Blue" ></span><span class= "Blue" ></span><span Class= "Blue" ></span></div>
<div class= "Row row2" ><span class= "Blue" ></span><span class= "Blue" ></span><span Class= "Blue" ></span></div>
<div class= "Row row3" ><span class= "Blue" ></span><span class= "Blue" ></span><span Class= "Blue" ></span></div>
</div>
<div id= "Back" class= "page back" >
<div class= "Row row1" ><span class= "green" ></span><span class= "Green" ></span><span class= "Green" ></span></div>
<div class= "Row row2" ><span class= "green" ></span><span class= "Green" ></span><span class= "Green" ></span></div>
<div class= "Row row3" ><span class= "green" ></span><span class= "Green" ></span><span class= "Green" ></span></div>
</div>
<div id= "left" class= "page left" >
<div class= "Row row1" ><span class= "Orange" ></span><span class= "Orange" ></span>< span class= "Orange" ></span></div>
<div class= "Row row2" ><span class= "Orange" ></span><span class= "Orange" ></span>< span class= "Orange" ></span></div>
<div class= "Row row3" ><span class= "Orange" ></span><span class= "Orange" ></span>< span class= "Orange" ></span></div>
</div>
<div id= "Right" class= "page right" >
<div class= "Row row1" ><span class= "Red" ></span><span class= "Red" ></span><span class= "Red" ></span></div>
<div class= "Row row2" ><span class= "Red" ></span><span class= "Red" ></span><span class= "Red" ></span></div>
<div class= "Row row3" ><span class= "Red" ></span><span class= "Red" ></span><span class= "Red" ></span></div>
</div>
</div>
</div>

CSS3 3d Rubik's Cube