CSS3 3D Transform

The following three methods are available in the 3D transform:

• rotateX( angle )
• rotateY( angle )
• rotateZ( angle )

Zou Kai's gymnastics horizontal bar movement is Rotatex:

Tsai's sister's pole dancing isrotateY:

The stunt of rotating knives isrotateZ:

2.perspective properties, Pivot Point, CSS3 3D transform pivot point is in front of the browser !

For example, a 1680-pixel-wide display has a beautiful picture of a beauty, applied 3D transform, and the element or the element's parent element is set to a perspective size of 2000 pixels. The beauty of this beautiful multi-3D effect is the same as you personally in 1.2 display width of the place (1680*1.2≈2000) See the true effect of the same!!

3.translateZ help you find perspective position

Its child elements, the smaller the translateZ value, the smaller the child element size (because the element goes away, our eyes will be smaller); the larger the value, the larger the element is, and translateZ when the translateZ value is very close to 201 pixels, but not more than 201 pixels (such as 200 pixels), The size of the element will fill the entire screen (if the parent element does not have a overflow:hidden-like limit). Because of this time, the child element just moved to the front of your eyes, so-called "Isian, do not see Tarzan", that is the case. When the translateZ value becomes larger, more than 201 pixels, the element is invisible-it's good to understand: we can't see what's behind the eyes!

4.perspective-origin: Location

5.transform-style:preserve-3d; The former flat is the default value, which represents the plane; the latter preserve-3d represents a 3D perspective.

6.backface-visibility:hidden, the element behind is not visible, the default is to see

Merry-Be-Merry

Picture of Stage  (Perspective)    container  (transform-style:preserve-3d)        Pictures ...
If there are 9 pictures, the rotation angle of each picture accumulates 40 (360/9 = 40)

Img:nth-child (1) {Rotatey (0deg) Translatez (175px)}
Img:nth-child (2) {Rotatey (40deg) Translatez (175px)}
Img:nth-child (3) {Rotatey (80deg) Translatez (175px)}
Img:nth-child (4) {Rotatey (120deg) Translatez (175px)}
Img:nth-child (5) {Rotatey (160deg) Translatez (175px)}
Img:nth-child (6) {Rotatey (200deg) Translatez (175px)}
Img:nth-child (7) {Rotatey (240deg) Translatez (175px)}
Img:nth-child (8) {Rotatey (280deg) Translatez (175px)}
Img:nth-child (9) {Rotatey (320deg) Translatez (175px)}

Translatez to adjust the position,

Translatez value equals r = 64/math.tan (20/180 * Math.PI) ≈175.8

To let the Trojan spin, as long as the container rotates 40 degrees each time you can.

Gets the elements of the CSS3

functionSETCSS3 (obj,attrstyle) {varobj =document.getElementById (obj);  for(varIinchAttrstyle) {            //Console.log (Obj.style[i]); Property name            //Console.log (Attrstyle[i]); Property value            varNewi =i; Newi= Newi.replace (Newi.charat (0), Newi.charat (0). toUpperCase ()); if(Newi.indexof ("-") > 0) {//If there is a "-" with multiple attribute names, it is converted to a camel-capitalized form                varnum = Newi.indexof ("-"); //Console.log (newi.substring (num+1,num+2))//Find "-" followed by the first letter                //Console.log (newi.substring (num+1,num+2). toUpperCase ())//Find "-" followed by the first letter converted to uppercaseNewi = Newi.replace (newi.substring (num,num+2), newi.substring (num+1,num+2). toUpperCase ());//Replace            }               //Console.log (NEWI);Obj.style[newi] =Attrstyle[i]; obj.style["WebKit" + newi] =Attrstyle[i]; obj.style["Moz" + newi] =Attrstyle[i]; obj.style["O" + newi] =Attrstyle[i]; obj.style["MS" + Newi] =Attrstyle[i]; }    }

CSS3 3D Transform