2.5 CSS element transformation

- translate: One value represents the horizontal direction, two values represent: horizontal and vertical directions.
- translateX: To set the horizontal displacement, you need to specify the length value; if you specify a percentage, it is the percentage of the reference to its own width.
- translateY: To set the vertical displacement, you need to specify the length value; if you specify a percentage, it is the percentage of the reference height.
- Note:

.box {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%,-58%);
)

- - scale: Set the horizontal and vertical scaling at the same time. One value represents setting the horizontal and vertical scaling at the same time; the two values represent: horizontal scaling and vertical scaling respectively.
  - scaleX: Set the horizontal scaling ratio, the value is a number, 1 means no scaling, greater than 1 means enlarging, and less than 1 means reducing.
  - scalaY: Set the vertical scaling ratio, the value is a number, 1 means no scaling, greater than 1 means enlarging, and less than 1 means reducing.
  - Note:

- - - The value of scale supports writing negative numbers, but it is rarely used because it is easy to misunderstand.
    - Cannot operate on inline elements.
    - With the help of scaling, text smaller than 12px can be achieved.

- rotate: Set the rotation angle, you need to specify an angle value (deg), positive value is clockwise, negative value is counterclockwise. When rotating a value, it is equivalent to rotateZ
- Rotation will change the axis of the coordinate system (changes with the rotation angle)

- skew: One value represents skewX, two values represent: skewX.skewY
- skewX: Set the element to distort in the horizontal direction. The value is the angle value, which will pull the upper left corner and lower right corner of the element.
- skewY: Set the element to twist in the vertical direction. The value is the angle value, which will pull the upper left corner and lower right corner of the element.

- - transform-origin: 50% 50%, the transformation origin is at the center of the element, and the percentage is relative to itself. –default value
  - transform-origin: left top, the transformation origin is at the upper left corner of the element.
  - transform-origin: 50px 50px, the transformation origin is 50px 50px from the upper left corner of the element.
  - transform-origin: 0, when only one value is written, the second value defaults to 50%.
  - Note:

- - - Modifying the transformation origin has no effect on displacement, but will have an impact on rotation and scaling.
    - If two values are provided, the first is used for the abscissa and the second is used for the ordinate.
    - If only one is provided, if it is a pixel value, it represents the abscissa, and the ordinate takes 50%; if it is a keyword, the other coordinate takes 50%

- When performing multiple transformations, it is best to shift first and rotate last

The primary operation for 3D transformation of elements: the parent element must enable 3D space and depth of field

- flat : Let the child elements lie within the two-dimensional plane of this element (default value)
- preserve-3d: Let the child elements be located in the three-dimensional space of this element (3D space)

- none: Do not specify perspective – (default value)
- Length value: Specifies the distance between the observer and the “z=0” plane, negative values are not allowed.

- The perspective point position is the position of the observer; the default perspective point is at the center of the element. Set the observer position in the parent element. Normally, we do not need to adjust the perspective point position.
- perspective-origin: 488px 308px; offset relative to the coordinate axis 488px to the right and 308px down

- 3D displacement is based on 2D displacement and allows elements to be displaced along the z-axis.
- transform attribute:

- - translateZ: Set the z-axis displacement. You need to specify the length value. Positive values go out of the screen, negative values go in the screen, and percentages cannot be written.
  - translate3d: The first parameter corresponds to the x-axis, the second parameter corresponds to the y-axis, and the third parameter corresponds to the z-axis, and they cannot be omitted.

- 3D rotation is based on 2D rotation and can rotate elements along the x-axis and y-axis.
- transform attribute:

- - rotateX: Set the X-axis rotation angle. You need to specify an angle value (deg), facing the positive direction of the x-axis: positive values are clockwise, negative values are counterclockwise.
  - rotateY: Set the y-axis rotation angle. You need to specify an angle value (deg), facing the positive direction of the y-axis: positive values are clockwise, negative values are counterclockwise.
  - rotate3d: The first three parameters represent the coordinate axes: ×, y, z. The fourth parameter represents the angle of rotation. The parameters cannot be omitted. For example: transform: rotate3d(1,1,1,30deg), which means: ×.y,z are rotated 30 degrees respectively.

- 3D scaling is based on 2D scaling and allows elements to be scaled along the z-axis. The specific usage is as follows:
- transform attribute:

- - scaleZ: Set the scaling ratio in the z-axis direction. The value is a number, 1 means no scaling, greater than 1 means enlarging, and less than 1 means reducing.
  - scale3d: The first parameter corresponds to the x-axis, the second parameter corresponds to the y-axis, and the third parameter corresponds to the z-axis. The parameters are not allowed to be omitted.

- When performing multiple transformations, it is recommended to rotate last: transform: translatez(188px) scalez(3) rotateY (48deg);

- When rotated to the back, you can see the mirror image of the front. Use backface-visibility: hidden; to set the back to invisible.