Zhengyaing: Hello, I’m Zhengyaing.
Today’s Cheatsheet series will introduce you to the transform of CSS. As usual, the whole course is summarized into a Cheatsheet. Download address:Zhengyaing, video teaching:【12】 A diagram to master CSS deformation (theory + Practice) 
Today we’re going to talk about the deformation module, and if you’re familiar with positioning, you know, we can position objects in various ways, but all we can do is change the position. CSS deformations allow you to do a lot of other things, such as rotate, scale, flip, etc., to make your page’s animations and interactions look more natural.
Coordinate system
Before we get into the specifics of how properties are used, let’s understand coordinate systems
The first is the Cartesian coordinate system, which represents a position in space by two numbers and three numbers. In CSS, the three axes of this coordinate system are called the horizontal axis, the vertical axis, and the depth axis. The X-axis points to the right and the Y-axis points down. Note that, contrary to the usual practice, we can understand the Y-axis direction by looking at the top attribute plus or minus. The Z-axis represents the distance from the display, similar to the Z-index.
The second type of coordinate system is the spherical coordinate system. Used to describe angles in 3D space.
Now let’s start talking formally about “transform” : “transform”. Transform is actually a property with several properties that help control deformation. Let’s start with the main attribute: Transform, which can be a list or None of a Transform function. The morphed element has its own context, and the space taken up by the morphed element may not be the same as the previous one, but the space taken up by it on the page remains the same.
The order of the values of the transform is important, and if the order is changed, the result will be very different.
transform
Let’s introduce the transfrom function. The value of the transform property is one or more functions separated by Spaces. Each function is processed from beginning to end, and each function needs to be valid, otherwise the entire property will not take effect.
Translation function
To move along one or more axes.
TranslateX () and Translate Y () are often referred to as “2D” translation functions because they can only move elements around the page and not back and forth along the Z-axis. Both functions can accept a distance value, either as a length or as a percentage, and if it is a percentage, the distance moved is calculated relative to the size of the element itself. Translate () is short for translateX and translateY. If you omit the y value, it is assumed to be 0
The zoom function
Scaling transforms an element to make it larger or smaller, depending on the supplied value. The value of the scaling function is unitless real, and two is always positive. ScaleX and scaleY scale in two axes, scale (2) will double the width and height.
Rotating function
The rotation function rotates elements about some axis or some vector in 3D space. Rotate X, rotate Y, rotateZ, and rotate receive only one value, which is the Angle. Rotate () implements a 2D rotation, which is the same as rotateZ () because it rotates around the z-axis.
Tilt function
Tilting elements along the X and y axes cannot be tilting elements along the Z axis or vectors in 3D space. Skew (a) assumes that the Y-axis tilt Angle is 0.
Horizon function
This depth can be set through perspective. It can be imagined as a camera, where specific objects have different distances and show different 3D angles.
Other deformation properties
Several auxiliary properties that define the origin of the deformation and the field of view used by the scene.
Move the origin.
Two or three keywords that define the deformation relative to which point; The horizontal axis and vertical axis can use the English keywords top, right, etc. It could be length, percentage, etc.
Select 3D deformation mode
By default, the result is flat no matter how you transform it, which can be modified using the transform-style property.
Modify the horizon
Define the view, equivalent to the perspective () function discussed earlier, with a length property that defines the depth of the view cone, but the Perspective property applies the defined view depth to all the children of the target element. Most of the time, you should use the Perspective attribute,
Move the origin of the view
Define where the eye converge
Handle on the back
During the 3D morph process, we may see the back of the element, and use backface-visibility to determine if the back of the element faces our life and render the back, that’s all.
For two 🌰
For the code part, watch the video of station B
