CSS3 Rotating Cube-_-

<!DOCTYPE HTML><HTML><HeadLang= "en">    <MetaCharSet= "UTF-8">    <!--Sorry, time tight temporarily only wrote Google's method, ie and other browser compatibility has not written 0.0. -    <title>C3 Rotating Cube</title>    <style>        * {margin:0;padding:0;        }Body{Background-color:Skyblue;        }. Box{margin:100px Auto;width:200px;Height:200px;position:relative;            /*3d Rotation Effect*/Transform:Rotate3d (1, 1, 0, -30deg);            /*keep the rotation effect not to return*/Transform-style:preserve-3d;            /*like to add depth of field effect can be self-adjusting AH*/Perspective:0px;            /*Angle*/Perspective-origin:0px 0px;        }. Box > Div{width:200px;Height:200px;position:Absolute;Opacity:0.5;text-align:Center;Line-height:200px;        }. Front{Background-color:#ffc96b;Transform:Translatez (100px);        }. Back{Background-color:#a2faff;Transform:Translatez ( -100px) rotate (180deg);        }. Left{Background-color:#ffcef2;Transform:TranslateX ( -100px) Rotatey ( -90deg);        }. Right{Background-color:#a2d1ff;Transform:TranslateX (100px) Rotatey (90deg);        }. Top{Background-color:#f0f4ff;Transform:Translatey ( -100px) Rotatex (90deg);        }. Bottom{Background-color:#26d8ff;Transform:Translatey (100px) Rotatex ( -90deg);        }. Box:hover{Animation:move 5s Infinite linear;        }@keyframes Move{From {transform:Rotate3d (1, 0, 0, 290deg);            }50%{Transform:Rotate3d (0, 1, 0, -290deg);            } to{Transform:rotate3d (0, 0, 1, 266deg);            }        }    </style></Head><Body><Divclass= "box">    <Divclass= "Front">FRONT</Div>    <Divclass= "Back">Back</Div>    <Divclass= "Left">Left</Div>    <Divclass= "Right">Right</Div>    <Divclass= "Top">TOP</Div>    <Divclass= "Bottom">BOTTOM</Div></Div></Body></HTML>

CSS3 Rotating Cube-_-