CSS 3D transform (3D transform of CSS)

SRC1:OK, CSS3 3D transform transform, that's it!

Evaluation: Explain the basic concepts and principles of CSS 3D transform, super easy to understand, read clairvoyant Ah!!! A humorous programmer

Notes:

First, 4 concepts

1, Breach: three methods
Three methods in 3D transform:
(1) Rotatex (angle): Front push down
(2) Rotatey (angle): Turn Around
(3) Rotatez (angle): Lying in a horizontal hug

2. Essential Perspective (Perspective, perspective)
No perspective, no 3D
CSS 3D Transform pivot point in front of the browser (i.e. our eyes)

3, Translatez help you find perspective position
So that the elements are close to their own

4, Transform-style
Two attribute values:
(1) Flat: Indicates the plane's
(2) Preserve-3d: Represents a 3D perspective

Generally, stage elements transform-style:preserve-3d

Ii. understanding of 3 attributes

1, about perspective
PERSPECITVE two types of writing properties (see Blog "Six" for different performance)
(1) The Elements of the stage (the common ancestor elements of the animated elements)
(2) for the current animation element, along with other properties of the transform

2, Perspective-orign
Which is the center point of the eye.

3, Backface-visibility
In the 3D world of CSS3, by default, we can see the elements behind
In order to be practical, we often make the latter element invisible, namely Backface-visibility:hidden;

Three, principle 3 layer

eg. the carousel of pictures

1 stage (Add a sight, perspective:800px)
1.1 Container (Add 3D View Declaration, transform-style:preserve-3d)
1.1.1 Pictures
1.1.2 Pictures
1.1.3 pictures (to avoid a helical effect like DNA-to make the Position=absolute Common center point)

Reference:
"1" OK, CSS3 3D transform transform, that's it! http://www.zhangxinxu.com/wordpress/?p=2592