Implementation of 2D and 3D transformation in CSS3

CSS3 implements 2D plane transformation and visual 3D space transformation of elements. 2D transformation may be used more often, and 3D effect can also be icing on the cake;

About the Axes

We started to learn about coordinate axes in geometry in junior high school. The most basic one is the plane rectangular coordinate system XoY , and then the spatial rectangular coordinate system XYZ was extended. Now let's talk about the coordinate system in CSS.

In CSS and even device-related development, the following coordinate system is basically followed: Taking the mobile phone screen as an example, the coordinate system dot is located in the upper left corner of the screen; the x-axis is horizontal, with the right direction as the positive direction; the y-axis is vertical, with the downward direction as the positive direction; the z-axis is perpendicular to the entire screen plane, with the outward direction as the positive direction, which is the direction in which the screen light is directed toward your eyes;

As shown in the figure:

2D Transformations

Including translation translate() , rotation rotate() , scaling scale() , skew() , matrix matrix() ;

translate(x,y)

Translation operations include translateX(x) and translateY(y) . The translation parameter value is filled in the brackets and can be a negative value, that is, in the opposite direction.

For example:

div {
    /*The element moves 50px to the right and 60px down*/
    transform: translateX(50px);
    transform: translateY(60px);
}
/*Shorthand form, same effect*/
div {
    transform: translate(50px, 60px);
}

Note that if translate() specifies only one value, the default is x-axis displacement, that is, horizontal movement;

rotate(deg)

The element rotates. The parameter in the brackets is the rotation angle. Clockwise is a positive value, counterclockwise is a negative value. The unit is deg , that is, how many degrees.

For example:

div {
    /* Rotate 30° clockwise */
    transform: rotate(30deg);
} 

scale(x,y)

Scaling elements, the parameters are the x-axis and y-axis scaling factors, including scaleX(x) and scaleY(y) . Providing one parameter means scaling in proportion ;

For example:

div {
    /* Reduce horizontally by half and enlarge vertically by twice*/
    transform: scale(.5, 2);
} 

div {
    /* Scale up by 3 times*/
    transform: scale(3);
} 

skew(xdeg,ydeg)

Contains skewX(deg) and skewY(deg) , which represent the tilt angles in the horizontal and vertical directions;

For example:

div {
    transform: skewX(30deg);
    transform: skewY(45deg);
}
/* Abbreviation */
div {
    transform: skew(30deg, 45deg);
}

Note that if the element is a rectangle, skewX(30deg) means that the top edge of the rectangle is fixed and the bottom edge is tilted 30deg to the right ; skewY(30deg) means that the left border of the rectangle is fixed and the right border is tilted 30deg downward ;

You can remember it based on the screen coordinate system mentioned above. The x-axis is at the top of the screen, pointing to the right; the y-axis is at the left of the screen, pointing downward.

If skew() specifies only one value, the default is horizontal skewing ;

The effect of skewX(30deg):

The effect of skewY(30deg):

matrix(a,b,c,d,e)

This is a comprehensive property. The previous translation, scaling, rotation, and tilt can all be achieved through this matrix function. Yes, the matrix T_T in linear algebra in college;

In fact, this function is based on the principle of the previous four operations. The function has six parameters, and the four operations correspond to different ways of changing the parameters. For those of us who are not majoring in mathematics, we will not go into details about the principle. The previous operations are basically enough (if you want to find excitement, go to Baidu "css matrix")~~;

3D Transformation

The so-called 3D is to add a z-axis to the previous 2D plane. The method name is similar, and then the three axes can be used for transformation to achieve a three-dimensional effect.

Take a look at all the 3D How-tos:

translate3d(x,y,z)

Combining the spatial coordinate system and the positions of the x, y, and z axes mentioned above, the three parameters correspond to the translation values ​​of the elements in the three coordinate axis directions, and also include three methods translateX(x) , translateY(y) , and translateZ(z) ;

Example:

div {
    transform: translateX(50px);
    transform: translateY(60px);
    transform: translateZ(70px);
}
/* Abbreviation */
div {
    transform: translate3d(50px, 60px, 70px);
}

Note: The problem of not seeing the effect of setting translateZ(z) will be explained later when we talk about setting persoective .

rotate3d(x,y,z,deg)

The parameters x, y, z are coordinate positions in the spatial coordinate system, and then a new axis with direction is formed from the origin (0, 0, 0) to this point, which is called a vector in mathematics. The last parameter is the degree of rotation of the element around the new axis just formed;

It also includes rotateX(deg) , rotateY(deg) , rotateZ(deg) . The previous 2D rotate() is rotateZ() here.

As for the direction of rotation, the judgment method is similar to the left-hand rule in physics: if the angle is specified to be positive, the thumb of the left hand is perpendicular to the four fingers, the thumb points to the coordinate axis or the custom axis around which the element rotates, and the direction around which the four fingers are bent is the direction of rotation;

Example:

div {
    transform: rotateX(30deg);
    transform: rotateY(30deg);
    transform: rotataZ(30deg);
}
/* Custom axis rotation */
div {
    transform: rotate3d(10, 10, 10, 30deg);
}

The effect of rotateX(30deg):

The effect of rotateY(30deg):

As to why the rotation here is not as expected but shrinks, it is mainly because the viewpoint is not set, which will be discussed later;

scale3d(x,y,z)

The scaling ratio of the element about three axes, including scaleX(x) , scaleY(y) , scaleZ(z) , for example:

div {
    transform: scaleX(2);
    transform: scaleY(2);
    transform: scaleZ(2);
}
/* Abbreviation */
div {
    transform: scale3d(2, 2, 2);
}

Note that scaleZ() is used here. Normally, expanding the z-axis will make the object thicker , but the plane elements presented in CSS do not have thickness , so scaling the z-axis here actually scales the coordinates of the element on the z-axis. Therefore, the value of translateZ() must be specified to achieve the desired effect.

Example:

body {
    perspective: 500;
}
div {
    /* This order must be followed, zoom first then translate, otherwise there will be no effect*/
    transform: scaleZ(2) translateZ(100px);
} 

Only by following the above style can we see the effect of scaleZ(2) , because the element moves 100px on the z-axis, and the scale ratio is 2, so it will move 200px in the end. On the screen, the element will appear to be enlarged. This is the perspective effect, which is the perspective value, which will be discussed below.

matrix3d()

It is similar to the previous 2D matrix() , except that there are 16 parameters in the brackets here, and the matrix is ​​more complicated. Let's skip it ﹋o﹋. If you are interested, you can search on Baidu~~;

perspective

In the above example, the translation and scaling of the z-axis usually have no visible effect. This is because of the lack of this attribute value, called perspective . This term appears in art or design, which is to achieve the effect of objects being larger when they are closer and smaller when they are farther away. The farther away, the smaller they are, and they will eventually become smaller to a point, which is the perspective point . perspective is used to set how far that point is from the element. Generally, 300~600 reflects a good perspective effect. The smaller the value, the more serious the perspective deformation of the element .

It should be noted that this property must be set in the style of the parent element of the element that applies the perspective effect in order to see the effect, for example:

body {
    perspective: 500;
    /* Consider browser compatibility*/
    -webkit-perspective: 500;
}

It can also be set on the element itself, in the format:

div {
    transform: perspective(500);
    -webkit-transform: perspective(500);
}

A more realistic effect of rotateX(45deg):

The effect of rotateY(45deg):

perspective-origin

This item sets the position of the perspective point. By default, it is at the geometric center of the element. If you need to set it, the format is as follows:

body {
    /* Default center */
    perspective-origin: center center;
    /* Top left corner */
    perspective-origin: left top;
    /* Right center */
    perspective-origin: right center;
    /* Bottom center */
    perspective-origin: bottom center;
    /* Can also be length*/
    perspective-origin: 30px 40px;
    /*Finally, remember to add -webkit- compatibility*/
}

The effect of perspective-origin: left center:

The effect of perspective-origin: right center:

backface-visibility

Translated, it means whether the back side is visible. You can set visible and hidden . It is visible by default. For example, if there is text on the front side of the element and the back side is set to be visible, the text in the element will become a mirror image after rotating 180° about the y-axis, otherwise it will not appear.

The effect of backface-visibility: visible:

The effect of backface-visibility: hidden (rotation occurs, but the back side is invisible, so it is invisible):

Other properties

transform-origin

Set the benchmark for 2D/3D changes. It can be a length value or left, right, top, bottom . For example:

div {
    /* Rotate about the upper left corner of the element */
    transform-origin: left top;
    transform: rotate(30deg);
} 

transform-style

Set how the element presents nested elements in 3D space. The options are flat and preserve-3d . The default is flat .

Here we can understand it this way. Before, when we transform an element, we transform it based on the coordinate system of the plane where the screen is located. However, if the element has child elements, transform-style is used to determine which coordinate system to transform on. flat means that the screen coordinate system is still used as the basis, and preserve-3d means that the coordinate system of the plane where the transformed parent element is located is used as the basis.

#parent {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: perspective(500) rotateY(45deg);
    -webkit-transform: perspective(500) rotateY(45deg);
}
#child {
    transform: perspective(500) rotateX(45deg);
    -webkit-transform: perspective(500) rotateX(45deg);
}

Effects of flat:

Effect of preserve-3d:

For example, if the parent element is rotated 45 degrees around the x-axis and transform-style: preserve-3d is set, and the nested child element is only rotated 45 degrees around the y-axis, then the final effect is that the child element is rotated 45 degrees around the y-axis of the parent element plane, which looks like the effect of rotating the x-axis 45 degrees first and then the y-axis 45 degrees;

Finally, don't forget to add browser-compatible prefixes for all the above features;

By the way, here is a demonstration page showing the combined effects of the above functions. Please click below: CSS 3D

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.