Everyone can read the CSS3 3d small demo

CSS3 3d Case Summary

Recently into the pit Web animation, so the learning process to record their own share to everyone. I'm going to give you a better one lately.

1. Rotate the puzzle

First look at the effect

The code is mainly composed of HTML and CSS3, it should be said to be relatively simple.

The first is the HTML code:

  <p class= "Camera" id= "Camera" > <p class= "Kuai" > <p class= "Mian" ></p> <p class= "M Ian "></p> <p class=" Mian "></p> <p class=" Mian "></p> <p class=" Mian "> </p> <p class= "Mian" ></p> </p> <p class= "Kuai" > <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> <p class= "Kuai" > < 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> <p cl ass= "Kuai" > <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> <p cl ass= "Kuai" > <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> </p>

The HTML frame of the 3-layer p is used here, and the hierarchy is very clear.
The next focus is on CSS code, how to use the CSS3 feature to achieve 3d and scrolling effect, and never let it appear 3D state.

body{background:red;}  /* For camera element */.camera{perspective:800px;/* This attribute is the distance of sight (depth of field), that is, visual range */width:500px;  height:300px;  Margin:auto; transform-style:preserve-3d;/* This property specifies how nested elements are rendered in 3D space. The preserve-3d child element retains its 3D position.  */}/* for module element */.kuai{width:100px;  height:300px;  margin:50px Auto;  Float:left;  transform-style:preserve-3d;  position:relative;  Transition:transform 1s; Margin-left: -1px;} /* For each polygon element of the module */.kuai:nth-of-type (2) >.mian{background-position: -100px 0;}. Kuai:nth-of-type (3) >.mian{background-position: -200px 0;}. Kuai:nth-of-type (4) >.mian{background-position: -300px 0;}. Kuai:nth-of-type (5) >.mian{background-position: -400px 0;}. Kuai:nth-of-type (6) >.mian{background-position: -500px 0;}.  mian{width:100px;  height:300px;  Position:absolute;  font-size:100px;  Text-align:center;  line-height:300px;  transform-style:preserve-3d;  Background-color:black; Backface-visibility:hidden;}.  Mian:nth-of-type (1) {Transform:translatez (150px); Background:url(..  /images/pic1.jpg) No-repeat; background-size:500px 100%;}.  Mian:nth-of-type (2) {Transform:translatez ( -150px) Rotatex (180deg); Background:url (..  /images/pic2.png) No-repeat; background-size:500px 100%;}.  Mian:nth-of-type (3) {width:300px; Transform:rotatey ( -90deg) Translatez (150px); transform attribute in/*3d is key, it is mainly by rotational movement scaling to transform the implementation of */}.mian:nth-of-type (4) {width  : 300px; Transform:rotatey (90deg) Translatez ( -50px);}.  Mian:nth-of-type (5) {Transform:rotatex (90deg) Translatez (150px); Background:url (..  /images/pic3.jpg) No-repeat; background-size:500px 100%;}.  Mian:nth-of-type (6) {Transform:rotatex ( -90deg) Translatez (150px); Background:url (..  /images/pic4.jpg) No-repeat; background-size:500px 100%;}

The end is JS

Window.onload=function () {  var Camera=document.getelementbyid (' camera ');  var kuais=camera.getelementsbyclassname (' Kuai ');  var chishu=0;  var geshu=5;  Camera.onclick=function () {    chishu++;    for (Var i=0;i<geshu;i++) {      kuais[i].style= "transition:transform 1s" +100*i+ "ms;transform:rotatex (" +chishu* 90+ "deg)";}}  

Here is a property that is useless to transform-origin, it is used to change the origin of the element location, can not be set.

Similarly, it can be set to: Transform-origin:top Right (the origin point in the upper-left corner), Transform-origin:bottom right (the origin point in the lower-left corner), Transform-origin:bottom Left (the origin point in the lower-right corner)

Summarize

In a word, in the course of my Learning CSS3, I have seen a lot of new features, but also learned how to use, but I want to say is that we do not need to learn how to use, but also to understand why each line of code to produce the corresponding effect, especially for 3D transform, we have to understand the basic 3D space, To get a better grasp of the effect that each of its property values can bring.