Deformation and animation in css3 (1), deformation animation in css3

Deformation and animation in css3 (1), deformation animation in css3

Several attributes of an animation produced by css3: transform, transition, and animation ).

First, we will introduce the transform deformation.

Transform.

In css3, note the following types of transform: rotate, skew, scale, translate, and matrix deformation matrix.

Syntax:

transform ： none | <transform-function> [ <transform-function> ]* transform: rotate | scale | skew | translate |matrix;

None is the default value, without deformation.

<Transform-function>: indicates one or more transformation functions,Separated by Spaces. You can perform multiple attribute operations on an element at the same time, such as using rotate, scale, and translate at the same time.

rotate(<rotate-angle> [<cx> <cy>])skewX(<skew-angle>)skewY(<skew-angle>)scale(<sx> [<sy>])translate(<tx> [<ty>])matrix(<a> <b> <c> <d> <e> <f>)

I. rotate

Rotate (<angle>): specify a 2D rotation (2D rotation) for the element using the specified angle parameter.Transform-originAttribute definition.

Transform-origin defines the basis point of rotation, where angle refers to the choice of angle, positive clockwise rotation, negative counterclockwise rotation.

2. translate Translation

The translate () function can move elements from the original position without affecting any web components on the x and Y axes, similar to position: relative.

Translate () is divided into three situations:

1. translate (x, y) moves horizontally and vertically at the same time.

Note: The base point of the translate operation is the center point of the element by default. You can change the base point based on transform-origin.

If the second value is not set, the default value is 0.

2. translate X(X) moves horizontally only.

Equivalent to the abbreviation of translate (x, 0,). The base point is the center point of the element.

3. translate Y(Y) Move vertically only.

Equivalent to the abbreviation of translate (0, y), the base point is the element in the center.

Iii. scale

Scale scaling is very similar to moving the translate file. There are also three cases.

Zoom center: the center of the element

Base: Zoom can be reduced or enlarged. The zoom base is 1, greater than 1, and smaller than 1.

1. The scale (x, y) element scales horizontally and vertically.

Note: If the second parameter is not provided, the value is the same as the first parameter.

 

2. scaleX (x) x-axis scaling.

3. scaleY (y) y-axis scaling.

 

Scale can take a negative value. A negative value will flip and scale the element.

<Style> div {width: 100px; height: 100px; border-top: 1px dotted orange; border-right: 1px solid red; border-bottom: 1px solid pink; border-left: 1px solid green; text-align: center; line-height: 100px; color: red; font-size: 15px; transform: scale (-1.5); margin: 0 auto; margin-top: 50px ;}</style> <div> Scale (-1.5) </div>View Code

 

Iv. skew Shear

Skew is the same as translate and scale.

1. skew (x, y): skew transformation on the x and y axes ).

That is, the X axis and Y axis are distorted according to a certain angle value at the same time.

If the second parameter is not provided, the value is 0, that is, the Y axis has no oblique tangent.

2. skewX (x): specify a skew transformation (diagonal transformation) along the x axis from the given angle ).

 

3. skewY (y): specify a skew transformation (diagonal transformation) along the y axis from the given angle ).

 

V. matrix

Matrix (<number>, <number>, d, e, f) specifies a 2D transformation in the form of a transformation matrix, which is equivalent to directly applying a [a, B, c, d, e, f] transformation matrix. It is to reposition the element based on the horizontal and vertical directions.

Matrix transformations are available in SVG, css3, and html5 canvas.

After an element is rendered, a bitmap can be obtained. Then, each point on the bitmap is transformed to obtain a new bitmap, resulting in translation, scaling, and rotation, shear and image reflector effects.

1. Several Concepts

• In matrix multiplication, first check whether two matrices can be multiplied: only the number of columns in the first Matrix equals the number of rows in the second matrix, so that the two matrices can be multiplied.
• Left multiplication [forward multiplication]: that is, multiplication on the left, and A left multiplication on E, that is, AE.
• A matrix of m * n is left by a matrix of n * p, and a matrix of m * p is obtained.

2D matrix transformations provide six parameters a, B, c, d, e, f. The basic formula is:

X and y are the first coordinates of the element, and X' and y' are the new coordinates obtained after matrix transformation.

Note: In the transformation matrix, parameters a, B, c, d, e, and f6 are arranged vertically.

x'=ax+cy+ey'=bx+dy+f

2. Relationship between matrix transformation and transform a, matrix and translate Translation

X' = ax + cy + e. If we set a = 1, c = 0, then x' = x + e,

Y' = bx + dy + f. If B is set to 0, d = 1, then y' = y + f.

This is translate (e, f.

Therefore, translate (e, f) is the simplified transformation matrix (, e, f ),

(X, y) Translation (tx, ty) means a matrix transformation of [1 0 0 1 tx, ty.

B. Matrix and scale

X' = ax + cy + e. If we set c = 0, e = 0, then x' = ax,

Y' = bx + dy + f. If we set B = 0, f = 0, then y' = dy.

This is scale (a, d.

Therefore, scale (a, d) is the simplified transformation matrix (matrix a, d ).

(X, y) Scaling (sx, sy) means a matrix transformation of [sx 0 0 sy 0 0 0.

C. rotate the matrix and rotate.

Rotate (a deg) is equivalent to [cons (a) sin (a)-sin (a) cons (a) 0] matrix transformation.

D. Matrix and skew Shear

SkewX (a deg) is equivalent to the matrix transformation of [1 0 tan (a) 1 0 0.

SkewY (a deg) is equivalent to the matrix transformation of [1 tan (a) 0 1 0 0.

Therefore, Matrix combines all 2D effects.

Vi. transform-origin

As mentioned above, the default base point of an element is its center location. You can use transform-origin to change its base point.

Usage:

Transform-origin (x, y): used to set the base point (reference point) of an element ). The default point is the center of the element. The values of x and y can be percentages, em, px, where x can also be left, center, right, or y, which is the same as that of background-position.

 

 

VII. resource links

Transformation matrix used in front-end development

CSS3: mathematical principles behind transform and transition [winter]

CSS3 2D Transform

W3c css3-2d-transforms

W3c RotationDefined

W3 documents about coordinate system and matrix transformation attributes
W3 document, 3D transformation matrix in SVG
W3 document, 3D transformation matrix in CSS 3

Transform-style and Perspective attributes

 

Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.