Deformation and animation in css3 (1)_html/css_WEB-ITnose

Several properties of CSS3 animation: transformation, transition and animation.

First introduce the transform deformation.

Transform English meaning: change, deformation.

Transform in CSS3 includes the following types: rotation, skew, scale, translate and matrix deformation.

Syntax:

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

none is the default value and no transformation is performed.

51a72c16a181454beb1335050c004065: Indicates one or more transformation functions, is separated by spaces . You can perform multiple attribute operations of transform 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>)

1. Rotate rotate

rotate(0c0cb308ee3d2ee3281772bfc9b806c2): Specify a 2D rotation (2D rotation) for the element through the specified angle parameter, which requires transform first -Definition of origin attribute.

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

2. translate translation

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

translate() has three situations:

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

Note: The base point of translate movement defaults to the center point of the element, and the base point can be changed according to transform-origin.

If the second value is not set, it defaults to 0.

2. translateX(x) only moves horizontally.

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

3. translateY(y) only moves vertically.

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

3. Scale scaling

Scale scaling is very similar to translate movement, and there are three situations.

Zoom center point: that is, the center position of the element

Base: Zoom can be reduced or enlarged; the scaling base is 1, greater than 1 to enlarge, less than 1 to reduce.

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

Note: If the second parameter is not provided, it will take the same value as the first one.

2. scaleX(x) x-axis scaling.

3. scaleY(y) y-axis scaling.

Scale can take negative values. Negative values ​​will cause the element to flip and scale.

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

4. Skew shear

There are three cases of skew like translate and scale.

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

That is, the x-axis and y-axis are twisted and deformed according to a certain angle value at the same time.

If the second parameter is not provided, the value is 0, that is, there is no bevel on the y-axis.

2. skewX(x): Specify a skew transformation along the x-axis at a given angle.

3. skewY(y): Specify a skew transformation along the Y-axis at a given angle.

5. Matrix

matrix(d80b5def5ed1be6e26d91c2709f14170, d80b5def5ed1be6e26d91c2709f14170, d80b5def5ed1be6e26d91c2709f14170, d80b5def5ed1be6e26d91c2709f14170, d80b5def5ed1be6e26d91c2709f14170, d80b5def5ed1be6e26d91c2709f14170): Specifying a 2D transformation in the form of a six-value (a, b, c, d, e, f) transformation matrix is ​​equivalent to directly applying a [a, b, c, d, e, f] transformation matrix. Just reposition elements based on horizontal and vertical directions.

SVG, css3, and html5 canvas all have matrix transformations. Let’s talk about them briefly.

After rendering an element, you can get a bitmap, and then transform each point on this bitmap to get a new bitmap, thus generating translation, scaling, rotation, shear and Mirror reflection light effect.

1. Several concepts

In matrix multiplication, you must first confirm whether the two matrices can be multiplied: only the number of columns of the first matrix is ​​equal to the number of rows of the second matrix, so can be multiplied by two matrices.

Left multiplication [front multiplication]: that is, multiplication on the left, A multiplied by E on the left is AE.

An m*n matrix multiplied by an n*p matrix on the left will get an m*p matrix.

2D matrix transformation provides 6 parameters a, b, c, d, e, f. The basic formula is:

Among them, x and y are the elements The starting coordinates, x' and y' are the new coordinates obtained after matrix transformation.

Note: The six parameters a, b, c, d, e, and f in the transformation matrix are arranged vertically.

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

2. The relationship between matrix transformation and transform

a. Matrix and translate translation

x'=ax cy e, we set a=1,c=0, then x'=x e,

y'=bx dy f, similarly assuming b=0, d=1, then y'=y f.

This is translate(e,f).

So translate(e,f) is the simplified transformation matrix matrix(1,0,0,1,e,f),

(x,y) translation (tx, ty), which means that a matrix transformation of [1 0 0 1 tx, ty] is made.

b, matrix and scale scaling

x'=ax cy e, we set c=0, e=0, then x'=ax,

y'= bx dy f, we assume b=0, f=0, then y'=dy.

This is scale(a,d).

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

(x,y) scaling (sx,sy) means doing a matrix transformation of [sx 0 0 sy 0 0].

c, matrix and rotate rotation

rotate(a deg) is equivalent to [cons(a) sin(a) -sin(a) cons(a) 0 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].

So Matrix is ​​a combination of all 2D effects.

6. transform-origin

As mentioned earlier, the default base point of an element is its center position, and transform-origin can be used to change its base point.

Use:

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

7. Resource links

Transformation matrices needed in front-end development

CSS3: Mathematical principles behind transform and transition [winter]

CSS3 2D Transform

w3c css3-2d-transforms

w3c RotationDefined

w3 document, about coordinate system and matrix transformation properties
w3 document, 3D transformation matrix in SVG
w3 document, 3D transformation matrix in CSS 3

Transform-style and Perspective properties