3D cube rotation effect with CSS

First look at the effect after running

It's a cube that keeps running.

First look at the HTML section of the code

<Divclass= "Rect-wrap">   <!--stage element, set perspective, and let its child elements get a perspective effect.  -    <Divclass= "Container">   <!--container, set transform-style:preserve-3d to render its child elements in 3D space -        <Divclass= "Top Slide"></Div>   <!--six faces of a cube -        <Divclass= "Bottom Slide"></Div>        <Divclass= "Left slide"></Div>        <Divclass= "Right Slide"></Div>        <Divclass= "Front slide"></Div>        <Divclass= "Back Slide"></Div>    </Div></Div>

Build six div first and then set the style to them in turn.

Look at their style sheets again.

<style type= "Text/css" >.rect-wrap{position:relative;Perspective:1600px;}. Container{width:800px;Height:800px;Transform-style:preserve-3d;Transform-origin:50% 50% 200px;/*set the origin of the 3d space to move the 200px position in the center of the plane and then toward the Z axis*/}. Slide{width:400px;Height:400px;position:Absolute;//Positioning}. Top{ Left:200px;Top:-200px;Transform:Rotatex ( -90deg);Transform-origin:Bottom;Background-color:#C69}. Bottom{ Left:200px;Bottom:-200px;Transform:Rotatex (90deg);Transform-origin:Top;Background-color:#6FF}. Left{ Left:-200px;Top:200px;Transform:Rotatey (90deg);Transform-origin: Right;Background-color:#9F0}. Right{ Left:600px;Top:200px;Transform:Rotatey ( -90deg);Transform-origin: Left;Background-color:#33F}. Front{ Left:200px;Top:200px;Transform:Translatez (400px);Background-color:#366/*the cube is in front of the screen, so no rotation, just move the distance to the z-axis*/}. Back{ Left:200px;Top:200px;Transform:Translatez (0);Background-color:#09F/*after the cube is facing the screen, so no rotation, just move the distance to the Z axis*/}@keyframes Rotate-frame{0% {Transform:Rotatex (0deg) Rotatey (0deg); }10%{Transform:Rotatex (0deg) Rotatey (180deg); }20%{Transform:Rotatex ( -180deg) Rotatey (180deg); }30%{Transform:Rotatex ( -360deg) Rotatey (180deg); }40%{Transform:Rotatex ( -360deg) Rotatey (360deg); }50%{Transform:Rotatex ( -180deg) Rotatey (360deg); }60%{Transform:Rotatex (90deg) Rotatey (180deg); }70%{Transform:Rotatex (0) Rotatey (180deg); }80%{Transform:Rotatex (90deg) Rotatey (90deg); }90%{Transform:Rotatex (90deg) rotatey (0); }100%{Transform:Rotatex (0) rotatey (0); }}.container{Animation:rotate-frame 30s Linear infinite;}</style>

This is the only code that can achieve 3D rotation.

It can also become a picture, you can do it

Add slices in each div, then set each image to a uniform name, and then give them a uniform style, set the height and width.

You can paste the copy code, just try it.

3D cube rotation effect with CSS