Deep understanding of CSS deformation transform (3d) and csstransform

Deep understanding of CSS deformation transform (3d) and csstransform
* Directory [1] coordinate axis [2] perspective [3] deformation function [4] perspective function [5] deformation origin [6] background visible before deformation Style

This article will introduce in detail the transform deformation 3D content, but it should be based on understanding transform deformation 2D. 3D deformation mainly involves attributes such as transform-origin, transform, transform-style, perspective, perspective-origin, and backface-visibility.

 

Coordinate Axis

Before learning about pivoting, you must first understand the coordinate axes. The biggest difference between 3D deformation and 2D deformation lies in the different coordinate axes of the reference. The coordinate axes of 2D deformation are flat, and only the x and y axes exist. The coordinate axes of 3D deformation are three-dimensional spaces composed of three axes: x, y, and z, the X axis is forward, the Y axis is forward, and the Z axis is forward to the right, down, and out of the screen respectively.

Perspective

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

// The following uses the rotateX () Rotation function as an example. rotateX (45deg) indicates that the elements rotate 45 degrees clockwise along the axis in the X axis direction. // The left graph shows the original effect of no deformation and perspective style, the effect of the deformation and perspective style is set in the graph, and the effect of the deformation but not the perspective style is set in the picture on the right.

The preceding three figures show that, if perspective is not set, the browser redirects the 3D deformation operation of the element to the 2D video plane, only showing the variation of the width and height of the element.

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

First, the deformation element, as the name implies, is the transform3D deformation element. It mainly sets attributes such as transform, transform-origin, and backface-visibility.

The observer is a non-dimensional point simulated by the browser to observe the elements to be viewed. The observer emits a line of sight, similar to a point light source that emits light.

The Perspective element, that is, the element observed by the observer, may be the deformation element itself, depending on the attribute settings, it may also be its parent level or its ancestor element (which will be detailed later). It mainly sets attributes such as perspective and perspective-origin.

 

Perspective distance

Perspective distance perspective refers to the distance between the observer's line of sight and the screen parallel to the Z axis.

Perspective

Value: none | <length>

Initial Value: none

Apply to: Non-inline elements (including block, inline-block, table, and table-cell)

Inheritance: None

[Note] perspective cannot be 0 or negative, because when the distance between the observer and the screen is 0 or when the screen is on the back of the screen, the front of the element to be viewed cannot be observed.

[Note] perspective cannot be used as a percentage, because the percentage requires relative elements, but the Z axis does not have an element size that can be relative.

[1] Generally, the farther the object is, the smaller it looks. The larger the perspective attribute, the less obvious the 3d effect of the element. (Like being very close to a person, you can even see his pores. If you are far away from a person, you may only see one profile)

[2] The element that sets the perspective attribute is the perspective element. Generally, this attribute can only be set at the parent or ancestor level of the deformation element. Because the browser will produce a perspective effect for its child-level deformation, but it will not produce a perspective effect for itself

<! -- Set perspective ineffective on its own elements --> <div style = "float: left; margin-right: 10px; border: 2px solid gray; "> <div style =" perspective: 200px; width: 100px; height: 100px; border: 1px solid black; background-color: pink; transform: rotateX (45deg ); "> </div> <! -- Set perspective effects on the parent element --> <div style = "perspective: 200px; float: left; margin-right: 10px; border: 2px solid gray; "> <div style =" width: 100px; height: 100px; border: 1px solid black; background-color: lightblue; transform: rotateX (45deg ); "> </div>

Perspective Origin

Perspective origin perspective-origin refers to the position of the observer. Generally, the observer is located 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% 50%

Apply to: Non-inline elements (including block, inline-block, table, and table-cell)

Inheritance: None

X axis: left | right | center | <percentage >|< length> Y axis: top | bottom | center | <percentage >|< length>

[1] keywords

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

[2] value

The X axis value indicates the offset between the X axis and the zero point (the upper left corner of the element border). the Y axis value indicates the offset between the zero point and the zero point on the Y axis.

[3] Percentage

The percentage of the X axis is the width and (width + horizontal padding + horizontal border) of the element to be viewed ), the percentage of the Y axis is equal to the height of the element to be viewed (height + vertical padding + vertical border)

[4] single value

If there is only one value, the second value is center by default.

[Note] perspective-origin must be defined on the element for which perspective is set, that is, it must be set on the parent or ancestor element of the element.

 

Deformation Function

After the perspective is introduced, we will introduce in detail the deformation functions and the deformation origin of 3d deformation. The previous blog introduces 2d deformation functions in detail. The 3d deformation functions are similar, including displacement, rotation, and scaling without skew.

[Note] tilting skew () is a two-dimensional deformation that cannot be deformed in 3D space. elements may be skewed on the X and Y axes, but not on the Z axis.

Matrix matrix3d

The displacement, rotation, and scaling of 3d deformation functions are implemented by setting different parameters in the matrix. Compared with the six parameters of the 2d matrix martrix (), the 3d matrix matrix3d has 12 parameters. The deformation rules are similar to those of 2 dmatrix (), but they are changed from 3*3 matrix to 4*4 matrix.

matrix3d(a,b,c,0,d,e,f,0,g,h,i,0,j,k,l,1)

3d displacement

3d displacement functions mainly include traslateZ () and translate3d ()

Translate3d (x, y, z)

[Note] x and y can be length values or percentages. Percentages are the width of the horizontal direction of the element and the height of the vertical direction. z can only set the length value.

TraslateZ (z) is equivalent to translate3d (0, 0, z)

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

[Note] the 3d displacement function is equivalent to matrix3d (, 0, x, y, z, 1)

3d Scaling

3d scaling functions include scaleZ () and scale3d ()

Scale3d (x, y, z)

The default value is scale3d (, 1). When the parameter is a negative value, flip and then zoom.

ScaleZ (z) is equivalent to scale3d (1, 1, z)

[Note] the 3d displacement function is equivalent to matrix3d (x, 0, 0, 0, y, 0, 0, 0, z, 0, 0, 0, 0, 1)

[Note] scaleZ () and scale3d () alone do not have any effect

.box1 .in{    transform: translateZ(-500px);}.box2 .in{    transform: translateZ(-100px);}.box3 .in{    transform: scaleZ(5) translateZ(-100px);}

// From left to right are box1, box2, and box3 respectively. It is learned that box3 is also equivalent to moving-500px to the Z axis.

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

3d Rotation

3d Rotation functions mainly include rotateX (), rotateY (), rotateZ (), rotate3d ()

Rotate3d (x, y, z, Ndeg)

X, y, and z are used to describe the vector values that rotate around x, y, and z axes respectively. The final deformation element rotates along a straight line consisting of (0, 0, 0) and (x, y, z. When N is a positive number, the element rotates clockwise. When N is a negative number, the element rotates counterclockwise.

RotateX (Ndeg) is equivalent to rotate3d (1, 0, 0, Ndeg)

RotateY (Ndeg) is equivalent to rotate3d (0, 1, 0, Ndeg)

RotateZ (Ndeg) is equivalent to rotate3d (0, 0, 1, Ndeg)

 

Pivoting Functions

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

[Note] the perspective origin perspective-origin can only be set to elements with the perspective attribute. If the perspective function perspective () is set for an element, the perspective origin cannot be used. The observer uses the default position, that is, the plane corresponding to the element center.

Perspective (<length>)

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

[Note] Because the transform attribute resolves the attribute values in the forward and backward order, you must write the perspective () function before other deformation functions. Otherwise, the effect will not be displayed.

 

Deformation Origin

The deformation point has been discussed during 2d deformation. Because there is no Z axis at the 2d deformation point, the default value of the Z axis is 0. The Z axis of the 3d deformation origin is a variable that can be set.

Transform-origin

Value: X axis, Y axis, and Z axis

Initial Value: 50% 50%

Apply to: Non-inline elements (including block, inline-block, table, and table-cell)

Inheritance: None

[Note] IE9-browser is not supported, safari3.1-8, android2.1-4.4.4, IOS3.2-8.4 need to add a prefix, other higher version of the browser can use standard writing

X axis: left | center | right | <length >|< percentage> Y axis: top | center | bottom | <length >|< percentage> Z axis: <length>

For the X axis and Y axis, you can set the keyword and percentage, respectively, relative to the horizontal direction of its elements and the vertical direction of the height and z can only set the length value

// The default deformation element style is transform: rotate3d (, 1, 45deg );

 

Visible background

The back of the element is visible by default. However, the backface-visibility attribute must be used to make the back of the element invisible.

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

Visible: visible. Default Value: hidden: invisible

// Set an element to contain two semi-transparent sub-elements. The content is A and B, respectively, to indicate the front and back of an element.

[Note] If one element overwrites the other, not only the front side, but also the back side.

 

Deformation Style

Deformation style transform-style allows deformation elements and their child elements to be displayed in 3d space. The deformation style has two values. Flat is the default value, indicating a 2d plane, and a perserve-3d representing a 3d space

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

transform-style: flat | preserve-3d