Basic knowledge of CSS 3d

Css3d Summary

3d transform (3D variant) (rotate skew scale translate)

Basic knowledge

Perspective (Visual range, depth of field) Perspective-origin (viewpoint)
Transfrom

(1) coordinates x y Z

(2) Deformation base point position transform-origin
(3) Transfrom-style:preserve-3d

3D Rotate Picture Album

3d transform (3D variant) (rotate skew scale translate)

Basic knowledge

Perspective (Visual range, depth of field) Perspective-origin (viewpoint)
Transfrom

(1) coordinates x y Z

(2) Deformation base point position transform-origin
(3) Transfrom-style:preserve-3d

3D Rotate Picture Album

It uses a relatively simple coordinate y-axis rotation So let's take a look at his code.

Code for HTML:

  <p class= "kj" id= "kj" >    <p class= "Mian" ></p>    <p class = "Mian" ></p>    <p class= "Mian" ></p>    <p class= "Mian" ></p>    <p class= "Mian" > </p>    <p class= "Mian" ></p >    <p class= "Mian" ></p>    <p class= "Mian" ></p>    <p class= "Mian" ></p>  </p>

The first thing to do is to build nine boxes and put nine pictures, which is easy to understand.

Code for CSS

          body{background: #6daf39; (the background adds a color that is mostly Nice)}. xj{perspective:600px; (This is the depth of the well) }. kj{Transition:1s; (Exercise time) transform-style:preserve-3d (achieve 3d effect of course it's very heavy) WI          dth:200px;          height:300px;          margin:80px Auto;          position:relative;          Transform:rotatey (0deg) Rotatex (0deg) Translatez ( -275px);          Transform-origin:center center-275px;        }. mian{Position:absolute;        font-size:50px;        Color: #fff;        Text-align:center;      line-height:300px;        }. Mian:nth-child (1) {width:200px;        height:300px;        Background: #ff2223;      Transform:rotatey (0deg) Translatez (275px);        }. Mian:nth-child (2) {width:200px;        height:300px;        Background: #ff2223;      Transform:rotatey (40deg) Translatez (275px);        }. Mian:nth-child (3) {width:200px;        height:300px; Background: #ff2223;      Transform:rotatey (80deg) Translatez (275px);        }. Mian:nth-child (4) {width:200px;        height:300px;        Background: #ff2223;      Transform:rotatey (120deg) Translatez (275px);        }. Mian:nth-child (5) {width:200px;        height:300px;        Background: #ff2223;      Transform:rotatey (160deg) Translatez (275px);        }. Mian:nth-child (6) {width:200px;        height:300px;        Background: #ff2223;      Transform:rotatey (200deg) Translatez (275px);        }. Mian:nth-child (7) {width:200px;        height:300px;        Background: #ff2223;      Transform:rotatey (240deg) Translatez (275px);        }. Mian:nth-child (8) {width:200px;        height:300px;        Background: #ff2223;      Transform:rotatey (280deg) Translatez (275px);        }. Mian:nth-child (9) {width:200px;        height:300px;        Background: #ff2223;      Transform:rotatey (320deg) Translatez (275px); }

CSS is here, very simple;

JS's Code

    Kj.onclick=function () {      cishu++;      var Jiaodu=40*cishu;      Kj.style.transform= "Rotatey (" +jiaodu+ "deg) Translatez ( -275px)"    }

(KJ) is 3d space, click on KJ If an effect, there will be a method or step;
3d Space Style Rotatey (this is the upper and lower axis rotation) Translatez (z This is the 3d stereo axis; Let 3d space move 275px to find the pivot position)