Deep understanding of CSS Morph Transform (2d)

xTable of Contents [1] deformation origin [2] deformation function [3] multi-value in front of the words

CSS Morph Transform is a collection of effects, mainly four basic operations such as move, rotate, scale, and tilt, as well as a more complex effect by setting up matrix matrices. The deformation transform can achieve two effects of 3D and four. The main properties involved in the transform deformation are the deformation function and the Transform-origin deformation origin. This article will introduce the knowledge of deformation transform2d in detail. In order to explain the whole process of deformation more clearly, CSS transition transition is used extensively in this demo. Detailed information about CSS transition transition

Deformation origin (2 D)

The deformation Origin transform-origin refers to the base point on which the deformation operation is based. By default, the Deform origin is at the center point of the element.

Transform-origin

Value: X-axis y-axis z-axis

Initial value: 50% 50%

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

Inheritance: None

Note ie9-Browser is not supported, Safari3.1-8, android2.1-4.4.4, ios3.2-8.4 all need to add prefix, other higher browser can use standard notation

The 2-D deformation Origin transform-origin is determined by the values of the x-axis and the y-axis two axes (regardless of the 3-dimensional case, the z-axis value defaults to 0)

X-axis: left | Center | Right | <length> | <percentage>| Center | Bottom | <length> | <percentage>

"1" keyword

0%of    0%    

Use the rotate () rotation function to illustrate the origin of the deformation. Rotate (90deg) indicates that the element rotates 90 angles clockwise

"2" value

The x-axis value represents the offset from 0 points on the x-axis (upper-left corner of the outer edge of the element border), and the y-axis value represents the offset from 0 points on the y-axis.

Use the rotate () rotation function to illustrate the origin of the deformation. Rotate (90deg) indicates that the element rotates 90 angles clockwise

"3" percent

Where the percentage of the x-axis is relative to the width of the element and (width+ transverse padding+ transverse border), whereas the y-axis is relative to the height of the element and (height+ portrait padding+ portrait Border)

Use the rotate () rotation function to illustrate the origin of the deformation. Rotate (90deg) indicates that the element rotates 90 angles clockwise

"4" Single value

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

Use the rotate () rotation function to illustrate the origin of the deformation. Rotate (90deg) indicates that the element rotates 90 angles clockwise

Deformation function (2-D)

Deformation transform is a collection of a series of deformation functions

Transform

Value: none | <transform-function>+

Initial value: None

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

Inheritance: None

<transform-function>: Translate | Scale | Rotate | Skew | Matrix

　　[Note that when multiple Morph functions appear in]transform, they are separated by a space

[note] Displacement, scaling, rotation, and tilt are not related to the deformation origin, except for the displacement, and the remaining three are associated with the deformation origin. Four operations

Matrices Matrix

In fact, the four operations of displacement, scaling, rotation, and tilt are all implemented through matrix matrices.

The matrix (a,b,c,d,e,f) function has the a,b,c,d,e,f of these 6 parameters. and x and Y are any point of the element before the transformation. The corresponding new coordinates x ' and y ' are generated by the following matrix transformations.

X'  = ax + cy + E; Y'  = bx + dy + F;

From this, the default a, D is 1,b, C, E, F is 0. A and D control scaling and cannot be tilted for 0;c and B controls, while E and F control displacements

Displacement

The Translate displacement function allows the element to move the specified displacement from its original position. There are 3 types of 2d functions involving displacements, namely translate (), TranslateX (), Translatey ()

[note] After the displacement of the element, the X and y axes of the element are then shifted, and if the elements are further deformed, they are deformed along the changed X-and Y-axes.

Translate (X[,y]?)

X represents the displacement of the element in the x-axis direction, and Y indicates the displacement of the element in the y-axis direction.

[note] When Y does not exist, it is equivalent to y=0;

TranslateX (x) equivalent to translate (x,0)

X indicates the displacement of the element in the x-axis direction

Translatey (y) equivalent to translate (0,y)

Y represents the displacement of the element in the y-axis direction

[note] The displacement function is equivalent to matrix (1,0,0,1,x,y)

The displacement function can also accept percentages. where x percent is the width relative to the horizontal direction of the element, and y% is relative to the height of the element's vertical direction and

Note IE10 Browser has bugs, the percentage of the element's displacement function is relative to the visible width of the element (excluding the border)

// The main style of the element is width:100px;height:100px;padding:10px;border:10px solid black;

Scaling

The scale scaling function allows the element to be scaled according to the Morph origin, with a default zoom value of 1. There are 3 types of 2d functions involved in scaling, namely scale (), ScaleX (), ScaleY ()

[note] When the element is scaled, if the element is to be shifted, the displacement value of the numeric type is multiplied by that scale, and the displacement value of the percent type is multiplied by the original width and or height and converted to a numeric type, multiplied by the scale

Scale (X,[,y]?)

X indicates the scale of the element in the x-axis direction, and Y indicates the scale of the element in the y-axis direction

[note] When Y does not exist, it is equivalent to Y=x

[note] When the value of x or Y is negative, the element flips and zooms first

ScaleX (x) equals scale (x,1)

X indicates the scale of the element in the x-axis direction

ScaleY (y) equals scale (1,y)

Y indicates the scale of the element in the y-axis direction

[note] The scaling function is equivalent to matrix (x,0,0,y,0,0)

Tilt

The skew tilt function allows an element to skew at a certain angle around the x-and Y-axes with its deformed origin. There are 3 types of 2d functions that are inclined, namely skew (), skewx (), Skewy ()

[note] When the element is tilted, the x-axis and y-axis are tilted, and if the element is to be manipulated in other variants, it will deform along the tilted X-and Y-axes

Skew (xdeg,[,ydeg]?)

x represents the angle of the y-axis to the x-axis, and y indicates the angle of the x-axis tilt to the y-axis

[note] When Y does not exist, it is equivalent to y=0

[Note that when]x>0, the y-axis is tilted in the positive direction of the x-axis; x<0, the y-axis is tilted in the negative direction of the x-axis

[Note that when]y>0, the x-axis is tilted in the positive direction of the y-axis and y<0, the x-axis is tilted in the negative direction of the y-axis

SKEWX (x) equivalent to skew (x,0)

x indicates the angle of the y axis to the x-axis tilt

Skewy (y) equivalent to skew (0,y)

Y indicates the angle of the x-axis tilt to the y-axis

[note] The tilt function is equivalent to matrix (1,tany,tanx,1,0,0)

Rotating

The Rotate rotation function allows the element to rotate clockwise by the specified angle (deg) according to the origin of the deformation, which defaults to 0deg. Unlike skew, rotate does not change the shape of an element. There is only one 2d function involving rotation, which is rotate ()

[note] After the element rotates, the x and y axes of the element also rotate. Deformation of the x and Y axes after rotation if the element is to be manipulated in other variants

Rotate (ndeg)

[note] When n is positive, the element rotates clockwise, and when N is negative, the element is rotated counterclockwise

[note] The rotation function is equivalent to matrix (cosn,sinn,-sinn,cosn,0,0)

Multi-value

Transform variants can accept multiple values, separated by spaces when multiple morph functions occur, and executed in the order in which they were previously.

Transform: <transform-function1> <transform-function2> <transform-function3>, ....

The succession relationship of "1" multiple Morph functions can be converted to nested relationships of multiple elements

 <div style= transform:rotate (45deg) TranslateX (100px)   " ></div> <div style= transform:rotate ( 45DEG)   > <div style="  Span style= "color: #800000;" >transform:translatex (100px)   " ></div></div> 

. Box {  width: 100px;} . in {  background-color: pink;   height: 100px;} . out {  background-color: lightblue;   height: 100px;}

<Divclass= "box">    <Divclass= "Out"style= "-webkit-transform:rotate (45deg) TranslateX (100px), Transform:rotate (45deg) TranslateX (100px);"></Div>    <Divstyle= "-webkit-transform:rotate (45deg); Transform:rotate (45deg)">      <Divclass= "in"style= "-webkit-transform:translatex (100px); Transform:translatex (100px)"></Div>    </Div>    </Div>

The order of execution of multiple deformation functions in the "2" deformation transform is executed from the front to the back

// The first case: After rotating 45deg, the element's x-axis forward becomes the right lower 45deg, so the element's next displacement moves in this direction // second case: When the element moves 100px to the right, the element's origin is shifted along with the element and is always centered on the element, so the next rotation of the element is in place

Deep understanding of CSS Morph Transform (2d)