3D Rotating Box

CSS style:

. Stage{width:400px;position:relative;Perspective:800px;//Translate into depth of field or range of sight}@keyframes Rotate-frame{0% {Transform:Rotatex (0deg); }25%{Transform:Rotatex (180deg); }50%{Transform:Rotatex (360deg) Rotatey (0deg); }75%{Transform:Rotatex (360deg) Rotatey (180deg); }100%{Transform:Rotatex (360deg) Rotatey (360deg); }}. Container{width:450px;Height:450px;Transform-style:preserve-3d;Transform-origin:50% 50%;Animation:Rotate-frame 10s Infinite linear; }. Side{width:150px;Height:150px;position:Absolute;Box-shadow:inset 0 0 20px rgba (0,0,0,0.9);text-align:Center;Line-height:150px; }. Top{ Left:150px;Top:0;Transform:Rotatex ( -90deg);-o-transform:Rotatex ( -90deg);Transform-origin:Bottom;-o-transform-origin:Bottom; }. Bottom{ Left:150px;Top:300px;Transform:Rotatex (90deg);Transform-origin:Top; }. Left{ Left:0;Top:150px;Transform:Rotatey (90deg);Transform-origin: Right; }. Right{ Left:300px;Top:150px;Transform:Rotatey ( -90deg);Transform-origin: Left; }. Front{ Left:150px;Top:150px;Transform:Translatez (150px); }. Back{ Left:150px;Top:150px; }. Side img{width:150px;Height:150px; }

Html:

<Divclass= "Stage">  <Divclass= "Container">    <Divclass= "Side Top"><imgsrc= "1.jpg"></Div>    <Divclass= "Side Bottom"><imgsrc= "1.jpg"></Div>    <Divclass= "side Left"><imgsrc= "1.jpg"></Div>    <Divclass= "Side Right"><imgsrc= "1.jpg"></Div>    <Divclass= "Side Front"><imgsrc= "1.jpg"></Div>    <Divclass= "Side Back"><imgsrc= "1.jpg"></Div>  </Div></Div>

3D Rotating Box