"CSS3 practice" 3D box making

First, a 3D box, finally.

Online effect preview:http://dtdxrk.github.io/game/css3-demo/box-3d.html

Make Step 1: Create a basic structure

The distribution defines 6 polygons on a 3x3 canvas, and 1 and 4 are overlapping for the moment.

The HTML structure is relatively simple:

<div class= "box" id= "box" ><div class= "layer" >1</div><div class= "layer" >2</div>< div class= "layer" >3</div><div class= "layer" >4</div><div class= "layer" >5</div> <div class= "Layer" >6</div></div>

CSS section:

*{margin:0;padding:0;}. box{margin:50px auto;width:300px;height:300px, border:1px solid #ccc;p osition:relative;}. Layer{background-color: #000; Width:100px;height:100px;position:absolute;color: #fff; line-height:100px;font-size: 50px;text-align:center;}. Layer:nth-of-type (1) {top:100px;left:100px;opacity:0.2;}. Layer:nth-of-type (2) {top:0px;left:100px;opacity:0.4;}. Layer:nth-of-type (3) {top:200px;left:100px;opacity:0.6;}. Layer:nth-of-type (4) {top:100px;left:100px;opacity:0.8;}. Layer:nth-of-type (5) {top:100px;left:0;opacity:0.4;}. Layer:nth-of-type (6) {top:100px;left:200px;opacity:0.4;}

　　

　　

Make Step 2: Rotate 6 faces 3d to the corresponding position

First body needs to set a visual range {perspective:500px;}

Each layer is then rotated 3d, and the Transform-origin is set according to the position, meaning where to rotate.

Rotate a Face (2): CSS Add: Transform:rotatex ( -90deg); transform-origin:bottom; Rotates x:-90 according to the bottom of the element

Rotate a Face (3): CSS Add: Transform:rotatex (90deg); transform-origin:top;

Rotate a Face (5): CSS Add: Transform:rotatey (90deg); transform-origin:right;

Rotate a Face (6): CSS Add: Transform:rotatey ( -90deg); transform-origin:left;

Finally, seal the box on (4): CSS Add: Background-color:red;transform:translatez (100px); 4 is the same as the 1 position, only 3d Z to 100px is required.

Make Step 3: Let the box spin.

To make the box 3d rotate you also need to add a CSS property to box Transform-style:preserve-3d is a 3d perspective declaration

Then you can play the transform-origin:50% 50% 50px by setting a spin center on the box.

"CSS3 practice" 3D box making