CSS3 transform deformation property, 2D deformation, 3D deformation

1. 2D deformation

The transform attribute allows the element to undergo shape changes such as rotation, translation, scaling, and tilt, which is referred to as deformation. The following attribute values ​​represent the changing status of the element.

1. rotate() rotate attribute value

transform: rotate(angle value); unit: deg
such as: transform: rotate(45deg);
such as:transform: rotate(-45deg);

1. Elements are rotated around the center point by default;
2. A positive angle value indicates clockwise rotation;
   a negative angle value indicates counterclockwise rotation.

2. translate() displacement attribute value

• Composite writing method: Set the offset effect of the element with its own initial position as the origin

transform: translate (horizontal offset, vertical offset); Unit: pixel value/percentage
Such as: transform: translate(200px,300px);
or:transform: translateX(200px) translateY(300px)

• Written individually: The letters X and Y must be capitalized

Offset
_ transform: translateX(100px);
_ It can be set using translateY() alone.
like:
transform: translateY(200px);

3. scale() scale attribute value

transform: scale(scale multiple value);

1. The default scaling value is 1. A positive number indicates normal scaling; a negative number indicates inverted scaling.
2. Numeric value range:
   Multiple: 0~1 normal reduction, > 1 normal enlargement;
   Multiple: <0, element inversion (-1~0 inversion reduction, less than -1 inversion enlargement).
3. The zoom factor value can be set to two values, which represent horizontal scaling scaleX and vertical scaling scaleY. Therefore, it can also be written in combination or individually.

4. skew() tilt attribute value

transform: skew (tilt angle value); Unit: deg
The tilt angle value can be set to one or two values, which represent the horizontal tilt skewX and the vertical tilt skewY, the same as the previous two.

5. transform-origin changes the origin attribute

The default change origin of an element is the center point of the element. We can customize the change origin through the transform-origin attribute as the reference point for the above four transformations.

transform-origin: horizontal position and vertical position; can be expressed as a percentage or px pixel value

• The default value is transform-origin:50% 50%; /*是元素的正中心位置：*/.
• You can also set the changing origin position yourself as needed.
  For example: Set the upper left corner vertex as the origin of change
  transform-origin:0 0;

6. Compound writing, changing order and combination

The above four deformations can be expressed by compound writing

• Canonical order:transform: scale() translate() skew() rotate();
• The issue of order: Even if the same attribute value is written in a different order, the results will be different, so rotation is generally placed later.
  Let’s look at a piece of code first:

.wrap .box1{
           /* 先平移，水平移动200px，垂直移动200px，最后旋转45度 */
            transform: translate(200px,200px) rotate(45deg);
        }
.wrap .box2{
           /* 先旋转，旋转45度 ，再水平移动200px，垂直移动200px */
            transform: rotate(45deg) translate(200px,200px) ;
        }

Rendering:

We will find that the effect of translating first and then rotating is completely different from that of rotating first and then translating. That's because if it is rotated first, the original horizontal and vertical directions of its movement will be changed due to the change of rotation.

2. 3D deformation

3D deformation also has the above four states and the change of the origin of change like 2D deformation. Here we focus on 3D displacement and 3D rotation.

1. 3D sense of direction

Using the screen as a reference surface:

• X-axis: horizontal direction, that is, left and right direction
• Y axis: vertical direction, that is, up and down direction
• Z axis: The direction perpendicular to the plane composed of the X axis and the Y axis, that is, the direction perpendicular to the screen surface

2. perspective visual depth attribute

To see the 3D changing effect, you must set the depth of field perspective attribute, which is represented by pixel values.

• Depth of field is the visual distance effect. The larger the visual distance, the farther you can see (usually at least 600px starting)
• Add the perspective attribute to the parent of the 3D deformed element , rather than the deformed element itself.

3. transform-style: preserve-3d; display 3D hierarchy

If a sub-element has multiple 3D deformation effects, you need to add transform-style: preserve-3d;attributes, enable God's perspective, and display the 3D effects of multiple sub-elements to display the correct 3D level.

4. 3D deformation

3D zoom and 3D tilt are rarely used, and 3D displacement and 3D rotation are mainly used.
3D deformation is mostly implemented in combination with animation, pseudo-classes, js, etc.

• 3D displacement:

• transform: translateX（）Indicates the amount of movement in the X direction (horizontal direction)
• transform: translateY（）Indicates the amount of movement in the Y direction (vertical direction)
• transform: translateZ（）Indicates the amount of movement in the Z direction (the direction perpendicular to the plane where X and Y are located)
• transform: translate3d（）Amount of movement in three directions. (Note: Other deformation attribute values ​​may not all support this composite writing method)

• 3D rotation:

• transform: translateX()Represents rotation around the X axis
• transform: translateY()Represents rotation around the Y axis
• transform: translateZ()Represents rotation around the Z axis

For specific use cases, please refer to the following two articles: Using 3D attributes to create a heart-pounding feeling and the case of rotating magic box

Summarize

The above are the four attribute values ​​​​of 2D deformation compiled by the editor for everyone: the four deformation states represented by rotation, displacement, scaling, and tilt, as well as the change origin attribute, and the composite writing method of multiple deformation states, especially emphasizing the different orders. leading to different deformation results. 3D deformation provides a relatively detailed explanation of visual depth of field and how to display 3D levels. It was compiled with reference to various sources and my own understanding. If there may be inaccuracies and omissions, I hope you guys can enlighten me and make corrections. I would like to thank you in advance.