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

Deep understanding of CSS deformation transform (2d) and csstransform
* Directory [1] deformation source [2] deformation function [3] Before multi-value

CSS deformation transform is a set of effects. It mainly involves four basic operations: movement, rotation, scaling, and skew. You can also set a matrix to achieve more complex effects. Transform deformation can achieve 2D and 3D effects. 2D deformation mainly involves the transform deformation function and the transform-origin deformation origin. This article describes in detail the transform2d deformation knowledge. In order to clearly describe the entire process of deformation, the DEMO in this article uses a lot of CSS transition. For details about the CSS transition, move to this point

 

Deformation origin (2 dimensions)

The deformation origin transform-origin is the base point of the deformation operation. By default, the deformation source is located at the center of the element.

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

The transform-origin is determined by the values of the X axis and Y axis. (the value of the Z axis is 0 by default, regardless of the three dimensions)

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

[1] keywords

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

// Use the rotate () Rotation function to describe the deformation origin. Rotate (90deg) indicates that the element rotates 90 degrees clockwise.

[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.

// Use the rotate () Rotation function to describe the deformation origin. Rotate (90deg) indicates that the element rotates 90 degrees clockwise.

[3] Percentage

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

// Use the rotate () Rotation function to describe the deformation origin. Rotate (90deg) indicates that the element rotates 90 degrees clockwise.

[4] single value

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

// Use the rotate () Rotation function to describe the deformation origin. Rotate (90deg) indicates that the element rotates 90 degrees clockwise.

 

Deformation function (2 dimension)

Deformation transform is a set of deformation functions.

Transform

Value: none | <transform-function> +

Initial Value: none

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

Inheritance: None

<transform-function>: translate | scale | rotate | skew | matrix

[Note] multiple deformation functions in transform are separated by spaces.

[Note] Except for the displacement and deformation origin, the displacement, scaling, rotation, and skew operations are related to the deformation origin.

Matrix

In fact, the four operations are implemented through matrix.

Matrix (a, B, c, d, e, f) functions have six parameters: a, B, c, d, e, and f. X and y are arbitrary points of elements before deformation. Use the following matrix transformation to generate the corresponding new coordinates X' and Y '.

x' = ax + cy + e;y' = bx + dy + f;

The default values a and d are 1, and B, c, e, and f are 0. A and d control scaling, and cannot be 0; c and B control skew; while e and f control displacement

Displacement

The translate displacement function allows the element to move the specified displacement from the original position. There are three types of 2d functions involving displacement: translate (), translateX (), and translateY ()

[Note] After an element is displaced, the X and Y axes of the element also change. If the element is deformed by other operations, it must be deformed along the changed X and Y axes.

Translate (x [, y]?)

X indicates the displacement of elements in the x axis. y indicates the displacement of elements in the y axis.

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

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

X represents the displacement of elements on the x axis.

TranslateY (y) is equivalent to translate (0, y)

Y indicates the displacement of elements in the y axis.

[Note] the displacement function is equivalent to matrix (, x, y)

The displacement function can also accept the percentage. X % is the width and y % is the height and

[Note] the IE10 browser has a bug. The percentage of the element's displacement function is relative to the visible width and height of the element (excluding the border ).

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

Zoom

The scale function allows the element to scale according to the deformation source. The default scaling value is 1. There are three types of 2d functions involved in scaling: scale (), scaleX (), and scaleY ()

[Note] After an element is scaled, if the element is to be displaced, the numeric displacement value is multiplied by the zoom ratio; multiply the displacement value of the percentage type by the original width and height and convert it to the numeric type, and then multiply it by the scaling ratio.

Scale (x, [, y]?)

X indicates the scale of the element in the x axis. y indicates the scale of the element in the y axis.

[Note] When y does not exist, it is equivalent to y = x

[Note] when the value of x or y is negative, the element is flipped before scaling.

ScaleX (x) is equivalent to scale (x, 1)

X indicates the zooming ratio of elements on the x axis.

ScaleY (y) is equivalent to scale (1, y)

Y indicates the scaling ratio of elements in the y axis.

[Note] the scaling function is equivalent to matrix (x, 0, 0, y, 0, 0)

Skew

The skew function allows an element to tilt around the X axis and Y axis at a certain angle based on its deformation origin. There are three types of skewed 2d functions: skew (), skewX (), and skewY ()

[Note] After an element is skewed, the X and Y axes are skewed. If other deformation operations are required for an element, the elements are deformed along the X and Y axes after the element is skewed.

Skew (xdeg, [, ydeg]?)

X indicates the angle from the y axis to the x axis, and y indicates the angle from the x axis to the y axis.

[Note] When y does not exist, it is equivalent to y = 0.

[Note] If x> 0, the Y axis is skewed to the positive direction of the x axis. If x is less than 0, the Y axis is skewed to the negative direction of the x axis.

[Note] If y> 0, the X axis is skewed to the positive direction of the y axis. If y is less than 0, the y axis is skewed to the negative direction of the y axis.

SkewX (x) is equivalent to skew (x, 0)

X indicates the angle from which the Y axis is skewed to the x axis.

SkewY (y) is equivalent to skew (0, y)

Y indicates the angle from which the X axis is skewed to the y axis.

[Note] the skew function is equivalent to matrix (1, tany, tanx, 0)

Rotate

The rotate rotation function allows the element to rotate clockwise Based on the deformation origin by the specified angle (deg). The default value is 0deg. Unlike skew, rotate does not change the element shape. Only one 2d function involved in rotation is rotate ()

[Note] After an element is rotated, the X and Y axes of the element also rotate. If the element requires other deformation operations, it is deformed along the X and Y axes after rotation.

Rotate (Ndeg)

[Note] when n is positive, the element rotates clockwise. When N is negative, the element rotates counterclockwise.

[Note] the rotation function is equivalent to matrix (cosN, sinN,-sinN, cosN, 0, 0)

 

Multi-Value

Transform deformation can accept multiple values. Multiple deformation functions are separated by spaces and executed in the previous and subsequent order.

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

[1] The successive relationships of multiple deformation functions can be converted into the nested relationships of multiple elements.

<Div style = "transform: rotate (45deg) translateX (100px)"> </div> is equivalent to <div style = "transform: rotate (45deg) "> <div style =" transform: translateX (100px) "> </div>

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

<div class="box">    <div class="out" style="-webkit-transform:rotate(45deg) translateX(100px);transform:rotate(45deg) translateX(100px);"></div>    <div style="-webkit-transform:rotate(45deg);transform:rotate(45deg)">      <div class="in" style="-webkit-transform:translateX(100px);transform:translateX(100px)"></div>    </div>    </div>

[2] The execution sequence of multiple deformation functions in the deformation transform is from the beginning to the back.

// First case: After 45deg is rotated, the x-axis of the element changes to 45deg in the lower right, so the next displacement of the element moves to this direction. // second case: After the element moves 100px to the right, the origin of an element is translated along with the element and remains at the center of the element. Therefore, the subsequent rotation of the element is in-situ rotation.