Css3 animation Attributes -- transform (deformation)

Css3 animation Attributes -- transform (deformation)

In css3, transform mainly includes the following types:Rotate(Rotate ),Translate(Mobile ),Scale(Scaling ),Skew(Distorted) andMatrix(Matrix deformation ).

Syntax:

Transform: none |
 
  
[
  
   
] * That Is, transform: rotate | scale | skew | translate | matrix;
  
 

None indicates no deformation. These attributes of transform can be used in combination and used in combination. Space.

Next we will introduce each attribute one by one:

Rotate(Rotate ):

Specify a 2D rotation (2D rotation) for the original element using the specified angle parameter. The transform-origin attribute must be defined first. Transform-origin defines the basis point of rotation, where angle refers to the rotation angle. If the set value is positive, it indicates clockwise rotation. If the set value is negative, it indicates clockwise rotation. For example: transform: rotate (50deg)

Translate(Mobile ):

Translate (x, y) moves horizontally and vertically at the same time (that is, the x and Y axes move simultaneously); translateX (x) moves horizontally only (x axis moves); translateY (y) only vertical (Y axis ). For example, transform: translate (100px, 20px ).

Scale(Scaling ):

Scale (x, y) enables horizontal and vertical scaling of elements (that is, horizontal scaling of the x and y axes); scaleX (x) only scales horizontally (x-axis scaling ); scaleY (y) elements only scale vertically (y-axis), but they share the same center and base. The center is the central position of the element, and the base is 1, if the value is greater than 1, the element is enlarged. If the value is smaller than 1, the element is reduced. For example, transform: scale (2, 1.5 ).

Skew(Distorted ):

Skew (x, y) causes both horizontal and vertical distortion of elements (x and y axes are distorted at a certain angle); skewX (x) only causes horizontal distortion of elements (X axis distortion); skewY (y) only causes vertical distortion of elements (y axis distortion ). For example, transform: skew (30deg, 10deg ).

Matrix(Matrix deformation ):

Matrix ( , , , , , ): Specify a 2D transformation in the form of a (a, B, c, d, e, f) transformation matrix containing six values, it is equivalent to directly applying a [a B c d e f] Transformation Matrix

How to change the element base point transform-origin

Transform-origin (X, Y): The base point (reference point) used to set the motion of an element ). The default point is the center of the element. The values of X and Y can be hundreds of values, em, px, and X can also be the character parameter values left, center, and right; in addition to the hundred points, you can set the top, center, and bottom character values for Y and X. This looks a bit like setting background-position. For example, transform-origin :( left, top ).

Writing rules of transform in different browser kernels

/* Mozilla kernel Browser: firefox3.5 + */-moz-transform: rotate | scale | skew | translate;/* Webkit kernel Browser: Safari and Chrome */-webkit-transform: rotate | scale | skew | translate;/* Opera */-o-transform: rotate | scale | skew | translate;/* IE9 + */-ms-transform: rotate | scale | skew | translate;/* standard */transform: rotate | scale | skew | translate;