Effect Chart:
CSS code:
The code is as follows:
@keyframes Spin {from {Transform:rotatey (0);} to {Transform:rotatey ( -360deg);}} &NBSP
@keyframes spin-vertical {from {Transform:rotatex (0);} to {Transform:rotatex (360deg);}} &NBSP
/*************** Horizontal cube ***************/
. cube-wrap {perspective:800px;perspective-origin:50% 100px;float:left;margin:150px 0 0 200px;} &NBSP
. Cube {position:relative;width:200px;-moz-transform-style:preserve-3d;-moz-animation:spin 20s infinite Linear;} &NBSP
. 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;} &NBSP
. Depth Div.back-pane {Transform:translatez ( -100px) Rotatey (180deg);} &NBSP
. Depth Div.right-pane {transform:rotatey ( -270deg) Translatex (100px); Transform-origin:top right; &NBSP
. Depth Div.lefT-pane {Transform:rotatey (270deg) Translatex ( -100px); Transform-origin:center left;} &NBSP
. Depth Div.top-pane {Transform:rotatex ( -90deg) Translatey ( -100px); Transform-origin:top Center; &NBSP
. Depth Div.bottom-pane {Transform:rotatex (90deg) Translatey (100px); Transform-origin:bottom Center; &NBSP
. Depth Div.front-pane {Transform:translatez (100px);} &NBSP
/*************** vertically rotated cube ***************/
. cube-wrap.vertical. Cube {transform-origin:0 100px; Animation:spin-vertical 5s infinite Linear;} &NBSP
. cube-wrap.vertical. Depth Div.top-pane {Transform:rotatex ( -270deg) Translatey ( -100px);} &NBSP
. cube-wrap.vertical. Depth Div.back-pane {Transform:translatez ( -100px) Rotatex (180deg);} &NBSP
. cube-wrap.vertical. Depth Div.bottom-pane {Transform:rotatex ( -90deg) Translatey (100px);} &NBSP
/*************** The cubic ***************/ of the plane rotation;
. cube-wrap.flat {perspective:none; perspective-origin:0 0;}
HTML code:
The code is as follows:
<div class= "Cube-wrap" >
<div class= "cube Depth" >&NBSP;
<div class= "Front-pane" > FRONT</DIV>&NBSP
<div class= "Back-pane" >BACK</DIV>&NBSP;
<div class= "Top-pane" > TOP</DIV>&NBSP
<div class= "Bottom-pane" >BOTTOM</DIV>&NBSP;
<div class= "Left-pane" >LEFT</DIV>&NBSP
<div class= "Right-pane" >RIGHT</DIV>&NBSP;
</div>
</DIV>&NBSP
<div class= "Cube-wrap vertical" >
<div class= "cube Depth" >&NBSP;
< Div class= "Front-pane" >front</div>
<div class= "Back-pane" >BACK</DIV>&NBSP;
< Div class= "Top-pane" >top</div>
<div class= "Bottom-pane" >BOTTOM</DIV>&NBSP;
< Div class= "Left-pane" >left</div>
<div class= "Right-pane" >RIGHT</DIV>&NBSP;
< /DIV>&NBSP
</div>
<div class= "cube-wrap flat" >&NBSP;
;d IV class= "cube depth" >
<div class= "Front-pane" >FRONT</DIV>&NBSP;
<div class= " Back-pane ">back</div>
<div class=" Top-pane ">TOP</DIV>&NBSP;
<div class=" Bottom-pane ">bottom</div>
<div class=" Left-pane ">LEFT</DIV>&NBSP;
<div class = "Right-pane" >right</div>
</div>
</div>