CSS3 Implementing a cube effect

<! DOCTYPE html>


<meta charset= "Utf-8"/>
<title></title>
<style>
@keyframes Spin {from {Transform:rotatey (0);} to {Transform:rotatey ( -360deg);}}
@keyframes spin-vertical {from {Transform:rotatex (0);} to {Transform:rotatex (360deg);}}
/*************** Horizontal cube **************-moz-animation:spin 20s infinite linear;*/
. cube-wrap {perspective:800px;perspective-origin: -50% -100px;float:left;margin:150px 0 0 200px;}
. cube {position:relative;width:200px;-moz-transform-style:preserve-3d;}
. Cube Div{position:absolute;width:200px;height:200px;background:rgba (255,255,255,0.1); Box-shadow:inset 0 0 30px RGBA (125,125,125,0.8); text-align:center;line-height:200px;font-weight:bold;text-shadow:-1px 1px 5px #f60; color:# fff;font-family:sans-serif;text-transform:uppercase;font-size:30px;}
. Depth Div.back-pane {Transform:translatez ( -100px) Rotatey (180deg);}
. Depth Div.right-pane {transform:rotatey ( -270deg) TranslateX (100px); transform-origin:top right;}
. Depth Div.left-pane {transform:rotatey (270deg) TranslateX ( -100px); Transform-origin:center left;}
. Depth Div.top-pane {Transform:rotatex ( -90deg) Translatey ( -100px); Transform-origin:top Center;}
. Depth Div.bottom-pane {Transform:rotatex (90deg) Translatey (100px); Transform-origin:bottom Center;}
. Depth Div.front-pane {Transform:translatez (100px);}
/*************** vertical rotation of the cube ***************/
. cube-wrap.vertical. Cube {transform-origin:0 100px;animation:spin-vertical 5s infinite Linear;}
. cube-wrap.vertical. Depth Div.top-pane {Transform:rotatex ( -270deg) Translatey ( -100px);}
. cube-wrap.vertical. Depth Div.back-pane {Transform:translatez ( -100px) Rotatex (180deg);}
. cube-wrap.vertical. Depth Div.bottom-pane {Transform:rotatex ( -90deg) Translatey (100px);}
/*************** plane rotation of the cube ***************/
. cube-wrap.flat {perspective:none;perspective-origin:0 0;}
</style>



<body>
<div class= "Cube-wrap" >
<div class= "Cube Depth" >
<div class= "Front-pane" >front</div>
<div class= "Back-pane" >back</div>
<div class= "Top-pane" >top</div>
<div class= "Bottom-pane" >bottom</div>
<div class= "Left-pane" >left</div>
<div class= "Right-pane" >right</div>
</div>
</div>
<div class= "Cube-wrap Vertical" >
<div class= "Cube Depth" >
<div class= "Front-pane" >front</div>
<div class= "Back-pane" >back</div>
<div class= "Top-pane" >top</div>
<div class= "Bottom-pane" >bottom</div>
<div class= "Left-pane" >left</div>
<div class= "Right-pane" >right</div>
</div>
</div>
<div class= "Cube-wrap flat" >
<div class= "Cube Depth" >
<div class= "Front-pane" >front</div>
<div class= "Back-pane" >back</div>
<div class= "Top-pane" >top</div>
<div class= "Bottom-pane" >bottom</div>
<div class= "Left-pane" >left</div>
<div class= "Right-pane" >right</div>
</div>
</div>
</body>