Learn to use CSS3 Transform deformation

Part ONE: Deformation introduction

Since the inception of cascading style sheets, elements have always been rectangular and can only be placed along horizontal and vertical axes. There are tricks to make the elements look tilted, but the underlying grid is not distorted. CSS morphing changes this by changing the shape of objects in different ways, and not just in two dimensions.

Whether you want to rotate photos, flip elements and so on, you can do it using CSS Morph, which can be 2D or 3D.

The CSS deformation functions include:

Translate
Scale
Rotate
SkeW

The second part: coordinate system

Before we study deformation, we need to know the coordinate system in deformation. In CSS, cartesian coordinates are represented by three axes:

X-axis (horizontal axis)
Y-axis (vertical axis)
Z axis (depth axis)

2D deformation only needs to be concerned with the x and y axes.

The X-axis is positive on the right, negative on the left. Positive values on the y axis go down the vertical axis, negative values go up the vertical axis. Recall the positioning of the element’s top attribute: the element moves down when the value is positive, and up when the value is negative.

If you want to move the element down to the left, set x to negative and y to positive:

 transform: translateX(-5em) translateY(50px);
Copy the code

The above distortion is valid. The above code moves the element 5em to the left and 50 pixels down.

3D deformations require attention not only to the X and y axes, but also to the Z axis.

The Z-axis jumps out of the monitor and points in front of you. Positive values on the z-axis are closer to you, negative values are farther away. The z-index attribute of the positioning element is exactly the same.

Add a z-axis value to this:

 transform: translateX(-5em) translateY(50px) translateZ(200px);
Copy the code

The element is 200 pixels closer to us than if the z-value is not specified. You can’t see it yet, but you will feel it when you introduce 3D morphing.

2.1 Moving the reference

Each element has its own reference, and each axis moves with respect to itself. If you rotate the element, you rotate the axis. Deformation after rotation is calculated relative to the axis after rotation, not the axis of the display. The diagram below:

Another coordinate system used in CSS deformation function – spherical coordinate system. This coordinate system is used to describe angles in 3D space. The diagram below:

In 2D deformation, you only need to focus on the full 360 degree coordinate system, that is, the screen composed of x and y axes. In terms of rotations, 2D rotations are really rotations about the Z axis. Similarly, if you rotate around the X-axis, the element will move toward or away from us, while if you rotate around the Y-axis, the element will rotate sideways, as shown below (carefully understood) :

We rotate it around the X-axis

We rotate it around the y axis

It’s rotating around the z axis

In 2D rotation, suppose we want to rotate an element 45 degrees clockwise on the display screen (i.e., about the Z-axis), the deformation value used could look something like this:

transform: rotate(45deg);
Copy the code

If you change the value to -45deg, the element will rotate counterclockwise about the Z-axis. In other words, the element rotates in the XY plane. The diagram below:

Part three: Morphing grammar and matters needing attention

The morph actually has only one property, but there are several secondary properties that control how it is morph. Transform uses the following table:

Transform
The values	`
The initial value	None
Apply to	All elements except the primitive-in-line box
The percentage of	Relative range box calculation
Calculated value	Value specified, but the relative length value is computed to the absolute length
inheritance	no
Animation sex	deformation

Description:

Scope box: The outer boundary of an element’s border. That is, contour and margins are not taken into account when calculating range boxes.
Morphed elements have their own stack context. The scaled element may be smaller or larger than before the deformation, but the amount of space the element takes up on the page remains the same. This is true for all deformation functions.
< transform – list > | deformation function, none said one or more intermediate separated by Spaces. For example: transform: rotate(30deg) skewX(-25deg) scaleY(2);
The deformation function is handled one at a time, starting with the first one on the far left and working its way to the last one. The order of processing from start to finish is important. If you change the order, you might get a different result.
When you have more than one deformation function, set each one correctly and make sure that all are valid. If one function is invalid, the entire value is invalidated.
Deformation usually does not add up. If you change the form of an element and then want to add a deformation, modify it based on the original deformation. Just as you declare a size in one place and a different size for an element in another, the size does not stack. Only one of the font sizes counts. Except for animation morphs, whether you use transitions or real animation, the effects are superimposed.
Deformation does not apply to primitive inline boxes yet. Primitive inline frames refer to span, hyperlinks, etc. These elements can be deformed along with the block-level parent, but cannot be rotated directly. Unless you change their display mode to display:block, display:inline-block, etc.

transform: translateX(200px) rotate(45deg);
transform: rotate(45deg) translateX(200px);
Copy the code

Div {transform: translateX (100 px) scale (1.2)}; div:hover {transform:rotate(-45deg)};Copy the code

Even without explicit use of transitions or animations, it is possible to implement superimposed transformations through user interaction pseudo-classes such as hover. This is because effects such as hover are transitions, but not triggered by transitions. So you can declare the deformation property above like this for effect overlay.

Deformation function

There are currently 21 deformation functions. Different deformation functions use values of different formats to achieve corresponding deformation.

translate()
translate3d()
translateX()
translateY()
translateZ()
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
skew()
skewX()
skewY()
matrix()
matrix3d()
perspective()

See this article for the syntax. The specific usage of each function is described in great detail.

Part four: translation function`translate()`

The translation function moves along one or more axes.

translateX()Moves an element along the X-axis of the element itself.
translateY()Move an element along the y axis of the element itself.
translateZ()Moves an element along its own Z-axis.

function	Value for
`TranslateX (), translateY ()`	`
`translateZ()`	`<length>`
`translate()`	` [
`translate3d()`	` [

4.1 `TranslateX (), translateY ()`

TranslateX (), translateY() these two are usually called “2D” translation functions because they move elements up and down as well as left and right. But you can’t move elements back and forth along the Z-axis. The value of both functions is a distance value, which can be a length or a percentage.

translateX(200px) <! -- Move the element 200 pixels to the right --> translateY(200px) <! -- Move the element down 200 pixels -->Copy the code

If the value is a percentage, the distance moved is calculated relative to the size of the element itself.

translateX(50%) <! Element moves to the right half of its size -->Copy the code

4.2 `translate()`

Translate () is more convenient if you want to move along both the x and y axes. The first value represents the X-axis and the second value represents the Y-axis. Translate () works the same as translateX() and translateY().

Translate (2em,0) equals translateX(2em).

4.3 `translateZ()`

TranslateZ () translates the element along the Z-axis, i.e. moves the element in the third dimension. TranslateZ () only accepts length values. You can’t really use percentages for anything on the Z axis.

4.4 `translate3d()`

The translate3D () attribute specifies the translation of the x, y, and Z axes at the same time. 3D translation process is shown as follows:

The arrows in the figure indicate movement along the corresponding axis, culminating in a point in 3D space. withtranslate()Different, iftranslate3d()Values are less than 3, and there is no assumed default value. So similartranslate3d(1em,-50px)The operation is invalid and cannot be assumed to betranslate3d(1em,-50px,0).

Part five: Scaling function`scale()`

Scaling transforms an element to make it larger or smaller. The value of the scaling function is unitless real and always positive. In a 2D plane, you can scale on either the x or y axes, or both.

function	Value for
`ScaleX (), scaleY(), scaleZ()`	`<number>`
`scale()`	`<number>[,<number>]?`
`scale3d()`	`<number>,<number>,<number>`

The number supplied to the scaling function is a multiplier, so scaleX(2) will make the element twice as wide as before, and scaleY(0.5) will reduce the element’s height by half. If you want to scale on both axes, use scale(). The first value is the x value and the second value is the y value. So scale(2,0.5) doubles the width of the element and reduces its height by half. If only one value is provided, it will be used as the scale value for both axes. Therefore, scale(2) doubles the width and height of the element. This is different from translate(), where the omitted second value is always set to 0. The following image shows an example of using scale() :

5.1 3d space scaling

If you can scale in two dimensions, you can scale in three dimensions. CSS provides a scalez() function that scales only on the Z-axis, whereas scale3D () scales on three axes simultaneously. Of course, these functions only work if the element has depth, which by default the element has no depth. Depth can be scaled if the element has a certain depth, such as rotation about the x or y axis. Use either scalez() or scale3D ().

Like translate(), all three numbers of scale3d() must be valid. Otherwise, the entire deformation value will be invalid.

Part six: Rotation function`rotate()`

The rotation function rotates an element about an axis of rotation, or about a vector in 3D space. There are four simple functions for rotation deformation, as well as a slightly more complex function dedicated to 3D rotation.

function	Value for
`Rotate (), rotateX(), rotateY(), rotateZ()`	`<angle>`

The four simple functions above all accept only one value: Angle. Angles are represented by a number (which can be positive or negative) and a valid unit of Angle (DEg,grad,rad, and turn). If a number is outside the normal range of the corresponding unit, it is converted to a value within the range. That is, 437DEg has the same effect as 77DEg, and the same effect as -283deg.

But this conversion is equivalent only if there is no animation of any kind. If rotated -20deg in animated form, the element tilts slightly to the left instead of rotating. If rotated 340deg as an animation, the element will rotate almost a full rotation to the right. The final state of both animations is the same, but the rotation process is different each time.

The rotate() function implements a 2D rotation, which is the most common rotation. It has the same effect as rotateZ() because it is rotated around the Z-axis (shot from the monitor and pointed at your eyes). Similarly, rotateX() rotates around the X-axis, tilting elements toward or away from you. RotateY () rotates the elements around the Y-axis like a door opens and closes. The effect is as follows:

Some of the examples above involve 3D effects. This can be achieved by pairing with the transform-style and perspective properties in later sections. This is true of all the 3D transformations covered in this article. If you apply only the deformation function mentioned now, you will not get the effect shown in the figure.

6.1 `rotate3d()`

function	Value for
`rotate3d()`	`<number>,<number>,<number>,<angle>`

If you know vectors, you can think of vectors as arrows in coordinate space. The following figure represents the vectors of 2-dimensional coordinates and 3-dimensional coordinates respectively:

To rotate elements in 3D space, use rotate3D (). The first three values specify the components of the vectors X,y, and z in 3D space, and the fourth value, the Angle value, specifies the amount of rotation around the vector.

Rotate (45deg) is rotate3d(0,0,1,45deg). This vector has magnitude 0 on the x and y axes, and magnitude 1 on the z axis. In other words, the center of rotation is the z-axis. The element is rotated 45 degrees about the specified vector. As shown below (including the value of the function that should be supplied to rotate3D () when rotated 45 degrees around the x and y axes) :

Rotate (45deg) is equivalent to rotate3d(0,0,1,45deg) in 3D space. The first three numbers set the three components of a vector that has magnitude 0 on the x and y axes. The magnitude on the z-axis is 1. So this vector is going to be on the z-axis, pointing in the positive direction, pointing at the observer. If you look at the origin of the vector, the element rotates clockwise.

Similarly, rotateX(45deg) is equivalent to rotate3d(1,0,0,45deg). This vector is on the X-axis, pointing in the positive direction. If you stand at the end of the vector and look toward the origin, the element rotates 45 degrees clockwise around the vector, so that if you stand in your normal observer position, the top of the element is away from the observer and the bottom of the element is near the observer.

Let’s say the rotation function is a vector described by rotate3d(-0.95,0.5,1,45deg). Let’s say I have a cube with 200 pixels on each side, and this vector has a size of 190 pixels on the X-axis, pointing to the left. It’s 100 pixels on the Y-axis, pointing down. It is 200 pixels in size on the Z-axis and points to the observer. This vector points from the origin (0,0,0) to (-190px,100px,200px). The diagram below:

This vector is like a metal rod that passes through the rotating element. If you look back along the vector, the element is rotated 45 degrees clockwise. However, since the vector points to the lower left, the rotated element is viewed near the upper left corner and away from the observer at the lower right corner.

Rotate3d (1,1,0,45deg) is not equivalent to rotateX(45deg) rotateY(45deg) rotateZ(0deg).

Part seven: Tilt function`skew()`

function	Value for
`skewX(),skewY()`	`<angle>`
`skew()`	`<angle>,[,<angle>]?`

A tilt function tilts an element along the x or y axis. Elements cannot be tilted along the Z axis or along vectors in 3D space.

SkewX (),skewY() skews an element at a specified Angle. The diagram below:

skew(a,b)The effect of 2D skew is implemented by matrix operations. The figure below shows several examples of matrix tilts.

Part eight: View function`perspective()`

When you change the shape of an element in 3D space, you basically give it a view. The view gives the element a front and back depth that can be set as needed.

function	Value for
`perspective()`	`<length>`

Set a smaller worthy to a more extreme perspective, and a larger worthy to a milder perspective. The diagram below:

Values smaller than 300px produce particularly distorted effects, values larger than 2000px produce “very mild” distortions, while values between 500px and 1000px produce “moderate” distortions. The figure below shows the results of different views at the same rotation Angle.

The field value must be positive and cannot be zero. Any other value causes the Perspective () function to be ignored. The position of the perspective() function in the list of deformation functions is important. If you want to set the view value in the deformation function list, be sure to put the perspective() function first, as long as it also comes before the deformation of the perspective.

Important: The order in which the transform functions are written is important. The Perspective () function is similar to the Perspective attribute described later, but the usage is completely different. In general, it is best to use the Perspective attribute, although there are exceptions where you need the Perspective () function.

Part nine: Modifying the horizon

The view is actually defined by two properties: one defines the view property distance, equivalent to the perspective() function discussed earlier. Another origin that defines the field of view.

9.1: Defining horizons`perspective`attribute

The value of the Perspective attribute is a length that defines the depth of the view cone. In this way, it is similar to the perspective() function discussed earlier, but there are important differences.

`perspective`
The values	`none
The initial value	`none`
Apply to	Any deformable element
Calculated value	Absolute length or None
inheritance	no
Animation sex	is

If you want to create an especially deep view that mimics the zoom lens, declare the perspective: 2500px. If you want to keep the depth shallow, declare perspective: 200px.

9.2:`perspective`Properties and`perspective()`Difference between functions

The Perspective () function defines the view only for the target element, such as declaring perspective(800px) rotateY(45deg). Then only the element to which this rule applies can use the specified view.
The depth of view defined by the Perspective attribute applies to all children of the target element.

That’s the important difference. The Perspective attribute creates a 3D space shared by all child elements, while the Perspective () function only affects the target element and is placed at or before the list of deformation functions. Most of the time, the Perspective attribute should be used.

9.3: Move the view origin`perspective-origin`attribute

`perspective-origin`
The values	` [left
The initial value	`50% 50%`
Apply to	Any deformable element
The percentage of	Relative range box calculation
Calculated value	You calculate it as a percentage. If the value is the length value, it is calculated as the absolute length
inheritance	no
Animation sex	`<percentage>,<length>`

Perspective-origin defines where the line of sight comes together.

The following figure shows the “rulers” under different view origin (the premise for view origin to take effect is that perspective attribute must be declared) :

Part ten: Matrix functions`matrix()`

`matrix()`
The values	`< number > [, < number >] {5, 5}`

The CSS deformation specification specifies the matrix() function strictly: the transformation matrix is determined with six values A-f to specify the deformation in 2D plane.

Valid values for the matrix() function are six comma-separated numbers. No more, no less. Numbers can be positive or negative. The values of the matrix() function have a complex syntax that describes the final state of an element after deformation, and can cover all other deformation types (rotation, skew, etc.). Finally, very few people use this syntax.

10.1 3D deformation matrix function

`matrix3d()`
The values	`< number > [, < number >] {2} 15`

The CSS deformation specification is strict about the matrix3D () function: a 4X4 homogeneous matrix is arranged in primary column order, using the 16 values to specify the 3D deformation. The value of the matrix3D () function must be 16 comma-separated numbers, no more or less. The numbers are arranged in columns in a 4X4 matrix, with the first column consisting of the first set of four numbers, the second column consisting of the second set of four numbers, and so on.

This chapter only gives a brief introduction to matrix functions.

Part 11: Moving the Origin`transform-origin`

The deformation seen so far has one thing in common: the absolute center of the element is the origin of the deformation. For example, when you rotate an element, you rotate it around the center, not around an Angle. This is the default behavior, but can be changed using the transform-Origin property.

`transform-origin`
The values	` [left
The initial value	`50% 50%`
Apply to	Any deformable element
The percentage of	Relative range box calculation
Calculated value	You calculate it as a percentage. If the value is the length value, it is calculated as the absolute length
inheritance	no
Animation sex	`<percentage>,<length>`

The value syntax looks complicated, but it’s actually not difficult to use. The transform-origin property has a value of two or three keywords that define which point to transform relative to. The first value is horizontal, the second value is vertical, and the optional third value is the length along the z-axis.

Horizontal and vertical axes can use English keywords, percentages, lengths. The Z axis cannot use English keywords or percentages. But you can use length values. Pixel values are by far the most common.

The length value sets the distance from the upper left corner of the element. So transform-Origin: 5em 22px defines the deformation origin 5em to the left of the element and 22px to the top edge of the element.

Percentage relative to the axis and element dimensions calculated. Sets the offset from the upper left corner of the element. For example, transform-origin: 67% 40% The distance to the left of an element is 67% of its width and 40% of its height from the top edge. The diagram below:

We rotate an element 45 degrees to the right by setting the position of the deformation origin, so that the final position of the element depends on the deformation origin. The following figure shows the results of different deformation origin.

The deformation origin also affects other deformation types, such as tilting and scaling. The diagram below:

There is one kind of deformation that is less affected by the origin of deformation – translation. Translate () moves an element to the same location regardless of the origin of the transformation.

Part xii: Deformation mode`transform-style`

If you change the shape of an element in a 3D space, for example using translate3D (), you might want to render the element in 3D space. However, this is not the default behavior. By default, no matter how you transform it, the result is flat. However, this can be modified using transform-style.

`transform-style`
The values	`flat
The initial value	`flat`
Apply to	Any deformable element
Calculated value	The specified value
inheritance	no
Animation sex	no

Let’s say we want to move elements in a moderate field of view. Use the following CSS:

.inner {  
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
}
<div class="outer">
    <div class="inner">inner</div>
</div>

Copy the code

The results are shown below:

However, if you rotate the outer div one way or the other, you get a different result: the inner div looks like a photo stuck to the outer div, which is not what you expect. Because transform-style defaults to flat. The top of the inner div leans forward and the bottom leans back, like an image attached to the outer div, rotating with the outer div.


.outer {  
    transform: perspective(750px) translateY(60px) rotateX(-20deg); 
}

.inner {  
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
}
<div class="outer">
    <div class="inner">inner</div>
</div>

Copy the code

The results are shown below:

However, change the value to preserve-3D and the result is quite different. The inner div is drawn as a 3D object that floats near the outer div and is therefore not attached to the outer div.


.outer {  
    transform: perspective(750px) translateY(60px) rotateX(-20deg); 
    transform-style: perserve-3d;
}

.inner {  
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
}
<div class="outer">
    <div class="inner">inner</div>
</div>

Copy the code

The result after modification is shown as follows:

Pay attention to

Transform-style the morphing mode set may be overridden by other properties. This is because some of the values of those attributes require the element and its children to be rendered flat to work. In this case, no matter what value you set transform-style to, it will be forced to reset to flat.

To avoid overwriting, the following attributes are set to the given values (which are also default values for attributes) :

overflow: visible
filter: none
clip: auto
clip-path: none
mask-image: none
mask-border-source: none
mix-blend-mode: normal

If you suddenly find that the 3D morphing effect is not working, the root cause may lie in one of the attributes in the list above.

Part 13: Dealing with the Back`backface-visibility`

In the 3D deformation, the backface-visibility property shows the back of the element.

`backface-visibility`
The values	`visible
The initial value	`visible`
Apply to	Any deformable element
Calculated value	The specified value
inheritance	no
Animation sex	no

The backface-visibility attribute determines whether to render the back of an element when its back is facing us, and that’s it.

Suppose you flip two elements so that one element’s backface-visibility property is set to Visible and the other to Hidden.

A simple card flip effect demonstrates the use of backface-visibility:

.card { position: relative; perspective: 800px; transform-style: preserve-3d; width:200px; height:280px; transition: all .6s; border: 1px solid #000; border-radius: 4px; } .card:hover { transform: rotateY(180deg); } img { position: absolute; width:100%; height: 100%; transition: all .5s; backface-visibility: hidden; } /* Since we hid both images on the back, there is nothing on the other side. Backface {transform: rotateY(180deg); transform: rotateY(180deg); } <div class="card"> <img class="front-face" src="1.jpg"> <img class="back-face" src="2.jpg"> </div>Copy the code

Refer to the link

If the link does not open directly copy the address to open in the browser

The Definitive Guide to CSS (4th edition)

Understand the transform of CSS3 from the relationship between matrix and spatial operation

CSS 3D rotate3D with Translate3D

www.bilibili.com/video/av673…

Meyerweb. Making. IO/csstdg4figs…

Htmldog.com/references/…

Learn to use CSS3 Transform deformation

Part ONE: Deformation introduction

The second part: coordinate system

2.1 Moving the reference

Part three: Morphing grammar and matters needing attention

Description:

Deformation function

Part four: translation functiontranslate()

4.1 TranslateX (), translateY ()

4.2 translate()

4.3 translateZ()

4.4 translate3d()

Part five: Scaling functionscale()

5.1 3d space scaling

Part six: Rotation functionrotate()

6.1 rotate3d()

Part seven: Tilt functionskew()

Part eight: View functionperspective()

Part nine: Modifying the horizon

9.1: Defining horizonsperspectiveattribute

9.2:perspectiveProperties andperspective()Difference between functions

9.3: Move the view originperspective-originattribute

Part ten: Matrix functionsmatrix()