Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "is there a negative value in the 3D plane z axis in css3", the content is detailed, the steps are clear, and the details are handled properly. I hope that this "3D plane z axis in css3 has negative value" article can help you solve your doubts.

The 3D plane z axis in css3 has a negative value. In the 3D coordinate system, the value of the z-axis is positive to the outside of the screen and negative to the inside of the screen; when the z-axis of the translate3D attribute value is negative, the element shifts to the screen, and the syntax is "transform:translate3d (x _ line y ~ z)".

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

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

The z axis of 3D plane in css3 has a negative value.

The three-dimensional coordinate system refers to the three-dimensional space, which is composed of three axes. The Z axis is positive on the outside of the screen and negative on the inside.

3D Mobile translate3D

Transform: translateX (100px) translateY (100px) translateZ (100px); abbreviated method transform:translate3d (xmemypenz)

XQuery yrez cannot be omitted. If not, write 0.

3D movement adds an additional direction that can be moved on the basis of 2D movement, that is, the z-axis direction.

Transform:translateX (100px), move transform:translateY (100px) only on the X axis, move transform:translateZ (100px) only on the Y axis, and move transform:translate3d only on the Z axis (XQuery y z), set, the value of xyz, z is in pixel units, without percentage

Perspective perspective

Near-large and far-small visual stereo is produced in the 2D plane, but the effect is only two-dimensional.

1. Perspective is needed if you want to produce a 3D effect in a web page (understood as a 3D object projected in a 2D plane)

two。 Simulating the position of human vision, it can be thought of arranging an eye to see.

3. Perspective is also called sight distance: sight distance is the distance from a person's eyes to the screen.

4. The closer the visual point is, the larger the image in the computer plane is, the farther the image is, the smaller the image is.

5. The units of perspective are pixels

Perspective written on the parent box of the element being observed

D: it is the sight distance, which is the distance from the person's eyes to the screen. The smaller the perspective, the larger the object.

Z: that's 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

Give a perspective value to a parent box, give different z values to different div, and you will see different results.

3D rotate rotate3d

Transform:rotate3d (x _ journal _ y _ ZJ _ deg), rotate the deg angle along the custom axis (just understand it)

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

Transform:rotate3d (1JEOPER0P0PING 45deg) x axis rotation 45degtransform:rotate3d (1PERIMENTOPERIMENTOMERING 45deg) diagonal rotation 45deg

3D rotation allows elements to rotate along the x-axis, y-axis, z-axis, or custom axis in a 3D plane.

Syntax:

Transform:rotatex (45deg): rotate 45degtransform:rotatey (45deg) along x-axis positive direction: rotate 45degtransform:rotatez (45deg) along y-axis positive direction: rotate 45degtransform:rotate3d along z-axis positive direction (xMaginyjournal zjournal deg): rotate deg to an angle along a custom axis (just understand)

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

Left-handed rule:

The thumb of the left hand points in the positive direction of the x-axis.

The rest of the fingers bend in the direction in which the element rotates along the x-axis.

X rotation:

The right time is to tilt your head into the screen.

A negative value means the head falls out of the screen.

Y axis rotation:

The left-handed rule is also fine.

Z axis rotation:

It's no different from 2d rotation.

3D rendering transform-style

1. Controls whether the child element turns on the 3D environment

The 2.transform-style:flat child element does not enable 3D stereo space, and the default

3.transform-style:preserve-3d, child elements open 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: 500pxscape position: relative;margin: 50px auto;transform-style: preserve-3d;} .son1, .son, .fa {width: 200pxscape height: 200pxpolitical position: all 2s;}

2.CSS style

Box specifies the size, and remember to add 3D rendering

The back box is rotated 180 degrees along the y-axis

Finally, the mouse rotates 180 degrees along the y-axis over the box.

After reading this, the article "is there a negative value in the 3D plane z axis in css3" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.