Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of CSS deformation transform (3D). The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Coordinate axis

Before you can understand perspective, you must first understand the axes. The biggest difference between 3D deformation and 2D deformation is that the reference axis is different. The coordinate axis of 2D deformation is planar, and there are only x axis and y axis, while the coordinate axis of 3D deformation is a three-dimensional space composed of x, y and z axes, with positive x axis, y axis and z axis facing to the right, down and off screen, respectively.

Perspective

Perspective is the most important content in transform deformation 3D. If you do not set perspective, the 3D deformation effect of the element will not be achieved.

/ / below take the rotateX () rotation function as an example. RotateX (45deg) indicates that the element rotates 45 angles clockwise along the X axis. / / the left is the original effect of no deformation and perspective style, the middle is the effect of setting the deformation and perspective style, and the right is the effect of setting the deformation but not the perspective style.

As can be illustrated by the above three pictures, if the perspective is not set, the browser will project the 3D deformation operation of the element vertically onto the 2D view plane, and only the width and height of the element will be displayed.

To gain an in-depth understanding of perspective, you need to understand the concepts of the observer, the perspective element, and the morph element.

First of all, the deformation element, as the name implies, is the element that carries on the transform3D transformation, mainly carries on the transform, transform-origin, backface-visibility and so on attribute setting.

The observer is a non-dimensional point simulated by the browser to observe the perspective element, and the observer emits a line of sight, similar to a point light source.

The perspective element is the element observed by the observer. depending on the attribute setting, it may be the deformed element itself, or it may be its parent or ancestor its element (which will be described in detail later). It mainly sets perspective, perspective-origin and other attributes.

Perspective distance

Perspective distance perspective refers to the distance between the viewer and the screen along the line of sight parallel to the z axis, referred to as sight distance.

Value: none |

Initial value: none

Apply to: non-inline elements (including block, inline-block, table, table-cell, etc.)

Inheritance: none

[note] the perspective perspective cannot be 0 and negative, because the front of the perspective element cannot be observed when the viewer is 0 away from the screen or on the back of the screen.

[note] the percentage of perspective perspective is not desirable because the percentage requires relative elements, but there is no comparable element size on the z-axis.

[1] generally speaking, the farther away the object is, the smaller it appears. Reflected in the perspective attribute, the higher the value of the attribute, the less obvious the 3D effect of the element. (just like being so close to a person that you can even see his pores; if you are far away from a person, you may only see an outline.)

[2] the element that sets the perspective perspective attribute is the perspective element. In general, this attribute can only be set at the parent or ancestor level of the morph element. Because the browser produces perspective for the deformation of its children, but not for itself

CSS Code copies content to the clipboard

Perspective origin

Perspective origin perspective-origin refers to the position of the observer. Generally speaking, the observer is on another plane parallel to the screen, and the observer is always perpendicular to the screen. The active area of the observer is the box model area of the observed element.

Perspective-origin

Value: X axis y axis

Initial value: 50%

Apply to: non-inline elements (including block, inline-block, table, table-cell, etc.)

Inheritance: none

X axis: left | right | center | | y axis: top | bottom | center | |

[1] keyword

X axis left: 0% center: 50% right: 100% y axis top: 0% center: 50% bottom: 100%

[2] numerical value

The x-axis value represents the offset from the 0 point on the x-axis (the upper-left corner outside the element border), and the y-axis value represents the offset from the 0 point on the y-axis.

[3] percentage

Where the percentage of the x axis is relative to the width sum of the perspective element (width+ horizontal padding+ horizontal border), and the percentage of the y axis is relative to the height sum of the perspective element (height+ vertical padding+ vertical border)

[4] single value

When there is only one value, the default second value is center

[note] perspective-origin must be defined on the element that sets the perspective, that is, it must be set on the parent or ancestor element of the element

Deformation function

After the introduction of perspective, the deformation function and origin of deformation 3D are introduced in detail. The last blog post introduced the 2d deformation function in detail. The 3D deformation function is similar, including displacement, rotation and scaling, without tilt.

[note] tilt skew () is a two-dimensional deformation and cannot be deformed in three-dimensional space. Elements may tilt on the x-axis and y-axis, but not on the z-axis.

Matrix matrix3d

The displacement, rotation and scaling of 3D deformation function are all realized by setting different parameters of matrix. Compared with the 6 parameters of 2d matrix martrix (), 3D matrix matrix3d has 12 parameters. Its deformation rule is similar to that of 2dmatrix (), except that it changes from 3-3 matrix to 4-4 matrix.

Matrix3d (a recalcitrance brecince0pjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

3D displacement

3D displacement function mainly includes traslateZ () and translate3d ()

Translate3d (xmeme yjinz)

[note] where x and y can be length values or percentages, which are the horizontal width and vertical height of their own elements; z can only set the length value

TraslateZ (z) is equivalent to translate3d (0pr 0je z)

[note] commonly used-webkit-transform: translateZ (0); to enable hardware acceleration

[note] 3D displacement function is equivalent to matrix3d (1JEOJEOJEOJEY 0JEI 0JEL 0JOJEL 0JOJEL 0B0JEREOJEL 0JINGOJING 0JEL 0JING 0JING 0JING 0JOBEL 0JEL 0JEL 0JOBEL 0JEL 0JEL 0J0BEL 0J0BEL 0BEL 0J0pIZJIZJEN 0BYJIZJEI)

3D Zoom

3D scaling functions mainly include scaleZ () and scale3d ().

Scale3d (xmeme yjinz)

The default value is scale3d, which is flipped and then scaled when the parameter is negative.

ScaleZ (z) is equivalent to scale3d.

[note] the 3D displacement function is equivalent to matrix3d (xpeng 0pj0je 0je 0rem 0pl 0pl 0pl 0pr 0pr 0pr 0pl)

[note] scaleZ () and scale3d () have no effect when used alone

CSS Code copies content to the clipboard

.box1 .in {

Transform: translateZ (- 500px)

}

.box2 .in {

Transform: translateZ (- 100px)

}

.box3 .in {

Transform: scaleZ (5) translateZ (- 100px)

}

/ / box1,box2,box3 is shown in the following figure from left to right. From this, we can see that box3 is also equivalent to moving toward the z-axis-500px.

So transform: scaleZ (5) translateZ (- 100px) and transform: translateZ (- 500px) are equivalent.

3D rotation

3D rotation functions mainly include rotateX (), rotateY (), rotateZ (), rotate3d ().

Rotate3d (xpencil ypencil Ndeg)

X, y, z are used to describe the vector values that rotate around the x, y, and z axes, respectively. Finally, the deformable element rotates along a straight line made up of two points: (0pc0re0) and (xrecoveryrez). When N is positive, the element rotates clockwise; when N is negative, the element rotates counterclockwise

RotateX (Ndeg) is equivalent to rotate3d.

RotateY (Ndeg) is equivalent to rotate3d.

RotateZ (Ndeg) is equivalent to rotate3d.

Perspective function

The perspective attribute perspective is described in detail above, but the perspective attribute is applied to the parent or ancestor level of the morph element. The perspective function perspective () is an attribute value of the transform deformation function, which is applied to the deformation element itself.

[note] because the perspective origin perspective-origin can only be set to elements with the perspective perspective property set. If you set the perspective function perspective () for the element, the perspective origin cannot afford to be used, and the observer uses the default position, that is, on the plane corresponding to the center point of the element.

Perspective ()

The parameter of the perspective function perspective () can only be a length value, and the length value can only be a positive number.

[note] since the transform attribute parses property values in front-to-back order, the perspective () function must be written in front of other morph functions, otherwise there will be no perspective.

Deformation origin

The deformation origin has been mentioned during the 2d deformation, and the 2d deformation origin has no z-axis, so the value of the z-axis defaults to 0. The z axis of the 3D deformation origin is a variable that can be set.

Transform-origin

Value: X axis y axis z axis

Initial value: 50%

Apply to: non-inline elements (including block, inline-block, table, table-cell, etc.)

Inheritance: none

[note] IE9- browsers do not support it. Safari3.1-8, android2.1-4.4.4 and IOS3.2-8.4 all need to add prefixes. Other later browsers can use standard writing.

X axis: left | center | right | | y axis: top | center | bottom | | z axis:

For the x-axis and y-axis, you can set keywords and percentages relative to the horizontal width and vertical height of their own elements; z can only set length values

/ / the default style of morphing elements is transform:rotate3d (1meme 1meme 1mem45deg)

The background is visible

The back of the element is visible by default. But sometimes you need to make the back of the element invisible, so use the attribute backface-visibility

Backface-visibility: sets whether the back of the element is visible

Visible: visible, default hidden: invisible

/ / set an element that contains two translucent child elements with absolute positioning overlap, with contents An and B, respectively, to represent the front and back of an element.

[note] if one element covers another, it covers not only the front, but also the back.

Deformation style

The morph style transform-style allows morph elements and their child elements to be rendered in 3D space. The morph style has two values. Flat is the default value for 2d plane, while perserve-3d represents 3D space

[note] transform-style:preserve-3d fails when overflow: non-visible or clip: non-auto is set

Transform-style: flat | preserve-3d

This is the end of the article on "sample Analysis of CSS deformation transform (3D)". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.