CSS example code for 3D cube rotation effects

This article describes the CSS implementation of 3D cube rotation effect sample code

First look at the effect after running

It's a cube that keeps running.

First look at the HTML section of the code

<p class= "Rect-wrap" >   <!--stage elements, set the perspective, and let their child elements get a perspective effect.    --<p class= "container" >   <!--container, set the transform-style:preserve-3d so that its child elements are rendered in 3D space--        <p class= "Top Slide" ></p>   <!--Six sides of the cube--        <p class= "Bottom Slide" ></p>        <p Class= "left slide" ></p>        <p class= "right slide" ></p>        <p class= "front slide" ></ p>        <p class= "Back slide" ></p>    </p></p>

Build six P 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 in the plane center and then move the 200px position to 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/* Cube front is facing the screen, so do not rotate, just move to the z-axis before the distance */}.back {left:200px;    top:200px; Transform Translatez (0);  Background-color: #09F/* The cube is right behind the screen, so do not rotate, 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 a piece to each p, then set each picture 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.

Related articles:

Simply make HTML5 page effect text effects

CSS comparison of commonly used rollover effects

Details on how the HTML5 3D clothes rocking animation effects are implemented