"Graphic CSS3" Note 2 transform variants

The transform supports 4 variants and matrices, and many variants are separated by spaces:

1. Move translate (+-xoffset, yoffset) + right Shift-Move left

2. Zoom scale (0.01~0.99| >1) 0.01~0.99 to zoom out, >1 to zoom in

3. Flip Skew ()

4. Swivel rotate (+-xdeg) + clockwise,-counterclockwise to x degree

5. Matrices Matrix ()

The 3D transform supports 3 variants and matrices, with a variety of deformation functions separated by spaces:

1. Move translate3d (x, Y, z) translatez ()

2. Zoom Scale3d () Scalez ()

3. Rotate Rotate3d () Rotatez () Rotatex () Rotatey ()

4. Matrix Matrix3D ()

5. Projection Perspective ()

Transform-origin: Used to specify the position of the center point of the element (default: 50%) when specifying the deformation, there are two types of values:

1. Keywords: Left center right | Top center Bottom

2. Offset:-100% 0% 50% 100% 200%

Transform-style: Specifies how inline child elements are rendered in a 3D control, two values:

1. Flat: (default) child elements rendered in 2D plane

2. Perserve-3d: Child elements are rendered in front or behind

Perspective: The distance between the observer and the Z-plane within the element 3D control (visual range):

1. None (default) wireless far from the point of view, near the flat

2. The larger the numerical value, the farther the distance, the less obvious the feeling, the smaller the value, the closer the distance, the feeling is obvious;

Backface-visibility: If the back of the element is visible, there are two values: visible | Hidden

"Graphic CSS3" Note 2 transform variants