What does the z-axis in css 3d refer to?

In CSS, the z-axis set by the 3D attribute refers to the axis in the positive direction from the screen to the human eye; in the 3-dimensional coordinate system, the value of the z-axis toward the outside of the screen is positive, and toward the inside of the screen The value is a negative value. For example, when the z-axis in the "translate3D" attribute value is a negative value, the element is displaced into the screen.

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What does the z-axis in css 3D refer to

Z-axis: refers to the axis in the positive direction from the screen to the human eye

In the 3-dimensional coordinate system, the value of the z-axis toward the outside of the screen is positive, and the value toward the inside of the screen is negative; when the z-axis in the translate3D attribute value is negative, the element is displaced into the screen,

D deformation CSS3 transform---rotateX(), rotateY(), rotateZ(), perspective

Left-handed coordinate system

Stretch out your left hand so that your thumb and index finger become "L" shape, thumb to the right, index finger up, middle finger pointing forward. In this way, we have established a left-handed coordinate system, with the thumb, index finger, and middle finger representing the positive directions of the X, Y, and Z axes respectively. As shown below

The 3D coordinate system in CSS3 is somewhat different from the above-mentioned 3D coordinate system, which is equivalent to rotating 180 degrees around the X-axis, as shown below

Simply remember their coordinates:

• x is negative on the left and positive on the right

• y The top is negative, the bottom is positive

• z The inside is negative, the outside is positive

(Learning video sharing : css video tutorial, html video tutorial)

The above is the detailed content of What does the z-axis in css 3d refer to?. For more information, please follow other related articles on the PHP Chinese website!