Is there a negative value for the z-axis of the 3-dimensional plane in css3?

The z-axis of the 3-dimensional plane in css3 has a negative value. 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, and the syntax is "transform:translate3d(x, y,z)”.

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

Is there a negative value for the z-axis of the 3-dimensional plane in css3?

Is there a negative value for the z-axis of the 3-dimensional plane in css3?

Three-dimensional coordinate system It refers to the three-dimensional space. The space is composed of three axes. The Z-axis is positive outside the screen and negative inside!

3D movement translate3D

transform: translateX(100px) translateY(100px) translateZ(100px);简写方法transform:translate3d（x，y，z）

x, y, z cannot be omitted, if not, write 0

3D movement is based on 2D movement On the top, an additional direction that can be moved is added, which is the z-axis direction

transform：translateX（100px），仅仅在X轴移动
transform：translateY（100px），仅仅在Y轴移动
transform：translateZ（100px），仅仅在Z轴移动
transform：translate3d（x，y，z），设置，xyz的值，z要用像素单位，不带百分比

Perspective

produces a visual stereoscopic view of near, large, far and small in the 2D plane, but It's just a two-dimensional effect.

1. If you want to produce a 3D effect in a web page, perspective is required (understood as a 3D object projected in a 2D plane)

2. To simulate the human visual position, you can think of arranging one eye to See

3. Perspective is also called visual distance: visual distance is the distance from the human eye to the screen

4. The closer to the visual point, the larger the image on the computer plane. The farther away you are, the smaller the image is

5. The unit of perspective is pixels

The perspective written on the parent box of the element being observed is

d: it is the viewing distance, and the viewing distance is The distance from the human eye to the screen. The smaller the perspective, the larger the object.

z: It is the z-axis, the distance between the object and the screen. The larger the z-axis (positive value), the larger the object we see.

translateZ

If you give a parent box a perspective value and give different divs different z values, the effects you will see are different.

3D rotation rotate3d

transform:rotate3d(x,y,z,deg), rotate the deg angle along the custom axis (just understand it)

xyz represents the vector of the rotation axis, indicating rotation along the vector axis, and the last one represents the rotation angle

transform:rotate3d(1,0,0,45deg)x轴旋转45deg
transform:rotate3d(1,1,0,45deg)对角线旋转45deg

3D rotation can make the element move along the x-axis, y-axis, z-axis or Custom axis rotation

Syntax:

transform:rotatex(45deg):沿x轴正方向旋转45deg
transform:rotatey(45deg):沿y轴正方向旋转45deg
transform:rotatez(45deg):沿z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可）

For judging the direction of element rotation, we need a left-hand criterion

Left-hand criterion:

The thumb of the left hand Pointing to the positive direction of the x-axis

The bending direction of the remaining fingers is the direction in which the element rotates along the x-axis.

The left-hand criterion can also be used

Z-axis rotation:

No different from 2d rotation

3D rendering transform-style

1. Control whether the sub-element enables the three-dimensional space.

2. transform-style: The flat sub-element does not enable the three-dimensional space, the default is

3. transform-style: preserve-3d , the child element opens the three-dimensional space

4. The code is written to the parent, but it affects the child box

5. This attribute is very important, and must be used later

Syntax:

.fa {
perspective: 500px;
position: relative;
margin: 50px auto;
transform-style: preserve-3d;
}
.son1,
.son,
.fa {
width: 200px;
height: 200px;
transition: all 2s;
}

2. CSS style

The box specifies the size, remember to add 3d rendering

The back box must be rotated 180 degrees along the y-axis

Finally the mouse passes The box is rotating 180 degrees along the y-axis

(Learning video sharing:

css video tutorial

)

The above is the detailed content of Is there a negative value for the z-axis of the 3-dimensional plane in css3?. For more information, please follow other related articles on the PHP Chinese website!