css3 animation attribute transform (transformation)_html/css_WEB-ITnose

Transform in CSS3 mainly includes the following types: rotate (rotation), translate (move), scale (zoom), skew (distortion) and matrix (matrix deformation).

Syntax:

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

none means no transformation. These attributes of transform can be used in a superimposed manner. When superimposed, use spaces to separate them.

The following introduces each attribute one by one:

rotate (rotation):

Rotate the original element through the specified angle parameter To specify a 2D rotation, the transform-origin attribute must first be defined. Transform-origin defines the base point of rotation, where angle refers to the angle of rotation. If the set value is a positive number, it means clockwise rotation. If the set value is a negative number, it means counterclockwise rotation. For example: transform:rotate(50deg)

translate (move):

translate(x,y) moves simultaneously in horizontal and vertical directions (That is, the X-axis and Y-axis move at the same time); translateX(x) only moves in the horizontal direction (X-axis movement); translateY(Y) only moves in the vertical direction (Y-axis movement). Such as transform:translate(100px,20px).

scale (zoom):

scale(x,y) causes the element to scale horizontally and vertically at the same time (that is, the X-axis and Y-axis simultaneously scale); the scaleX(x) element only scales horizontally (X-axis scaling); the scaleY(y) element only scales vertically (Y-axis scaling), but they have the same scaling center point and base, and their center point is the element's At the center position, the scaling base is 1. If its value is greater than 1, the element will be enlarged. Otherwise, if its value is less than 1, the element will be reduced. For example: transform:scale(2,1.5).

skew (distortion):

skew(x,y) causes the element to distort simultaneously in the horizontal and vertical directions (the The angle value is distorted); skewX(x) only distorts the element in the horizontal direction (X-axis distortion); skewY(y) only distorts the element in the vertical direction (Y-axis distortion). For example: transform:skew(30deg,10deg).

matrix (matrix transformation):

matrix(, , , , ): Specify a 2D transformation in the form of a six-value (a, b, c, d, e, f) transformation matrix, which is equivalent to directly applying a [a b c d e f] transformation Matrix

How to change the base point of the element transform-origin

transform-origin(X,Y): used to set the base point (reference point) of the element's movement . The default point is the center point of the element. The values ​​of X and Y can be percentage values, em, px, and X can also be character parameter values ​​left, center, and right; Y, like X, can also set character values ​​top, center, and bottom in addition to percentage values. This looks a bit like our background-position setting. For example: transform-origin:(left,top).

Transform writing rules under different browser cores

 /*Mozilla内核浏览器：firefox3.5+*/  -moz-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器：Safari and Chrome*/  -webkit-transform: rotate | scale | skew | translate ; /*Opera*/  -o-transform: rotate | scale | skew | translate ; /*IE9+*/  -ms-transform: rotate | scale | skew | translate ; /*标准*/  transform: rotate | scale | skew | translate ;