Deep understanding of CSS Morph transform (3d)

Axis

Before you understand a perspective, you first need to understand the axes. The biggest difference between 3D deformation and 2D deformation is that its reference axes are different. The axis of the three-dimensional deformation is planar, only the x-axis and y-axis, and the 3D deformation of the axis is the x, Y, z three axes composed of stereoscopic space, x-axis forward, y-axis forward, z-axis forward respectively to the right, the bottom and the outside of the screen

<!--set perspective on its own elements no effect--><div style= "float:left;margin-right:10px;border:2px solid gray;" >    <div style= "perspective:200px;width:100px;height:100px;border:1px Solid Black;transform:rotatex (45deg );" ></div></div><!--Set perspective 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;transform:rotatex (45deg);" ></div></div>

Perspective-origin

Value: X-Axis Y-axis

Initial value: 50% 50%

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

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

Matrix Matrix3D

3d deformation function displacement, rotation, and scaling are achieved by setting different parameters on the matrix. The 3d matrix Matrix3D has 12 parameters compared to the 6 parameters of the 2d Matrix Martrix (). The deformation rule is similar to 2dmatrix (), except that it is from the 3*3 matrix and becomes the 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] where x and y can be length values or percentages, percentages are the height of the width and vertical direction relative to the horizontal direction of the element itself, and z can only set the length value

3d Zoom

3d scaling functions mainly include Scalez () and Scale3d ()

Scale3d (x, Y, z)

The default value is Scale3d (1,1,1), which flips and zooms when the argument is negative

Scalez (z) equivalent to Scale3d (1,1,z)

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

[Note]scalez () and Scale3d () do not have any effect when used alone

. box1. in{    Transform:translatez ( -500px);}. Box2. in{    Transform:translatez ( -100px);}. Box3. in{    Transform:scalez (5) Translatez ( -100px);}

The box1,box2,box3 from left to right are respectively. As a result, Box3 is also equivalent to moving to 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 (X,Y,Z,NDEG)

x, y, and Z are used to describe the vector values that revolve around the x, y, and z axes, respectively. The final deform element rotates along the line formed by the two points (0,0,0) and (x, Y, z). When n is positive, the element rotates clockwise, and when N is negative, the element is rotated counterclockwise

[Note]safari Browser does not support keyframes changes in Rotate3d ()

Rotatex (ndeg) equivalent to Rotate3d (1,0,0,NDEG)

Rotatey (ndeg) equivalent to Rotate3d (0,1,0,NDEG)

Rotatez (ndeg) equivalent to Rotate3d (0,0,1,NDEG)

Background visible

The back of the element is visible by default. However, sometimes it is necessary to make the back of the element invisible, which will use the attribute backface-visibility

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

Visible: Invisible, default hidden: invisible

Morph Style

The Morph style Transform-style allows the deformed element and its child elements to be rendered in 3d space. The Morph style has two values. Flat is the default value, which represents the 2d plane, while Perserve-3d represents 3d space

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

Transform-style:flat | Preserve-3d

Deep understanding of CSS Morph transform (3d)