Transition of CSS3 and 2D transformation

Transition-duration:; Exercise time
Transition-delay:; Delay Time
Transition-timing-function:; Sport form
Ease gradually slows down (default)
Linear uniform
ease-in acceleration
Ease-out deceleration
Ease-in-out accelerate and slow down first
Cubic-bezier Bezier Curve (x1,y1,x2,y2) changes the motion effect by controlling the curve movement

Note: Multiple styles are transitioning at the same time (asynchronous transitions are required to add a parameter after the completion time: Delay time)

Example: transition:1s width,2s 1s height,3s 3s background;

Transitionend Events (event triggered after transition end)
Note: 1. Each change element one style will trigger a tranasitionend

In the WebKit kernel:
Obj.addeventlistener (' Webkittransitionend ', fn,false);
To be written under the standard:
Obj.addeventlistener (' Transitionend ', fn,false);

-transform:; Transform
Rotate (30deg) rotation rotates around the center point of the element 30 degrees
SKEWX (45deg) oblique cut along the X axis 45 degrees to Zola
Skewy (45deg) diagonal cut up 45 degrees along the Y axis
Comprehensive notation Skew (45DEG,45DEG)
ScaleX (2) scaling is twice times larger by the center point along the x-axis
ScaleY (0.5) scaling is twice times the center point in the y-axis
General notation Scale (2,0.5)
TranslateX (100px) displacement moves from left to right 100px
Translatey ( -100px) displacement moves from bottom to top 100px
Comprehensive notation Translate (100px,-100px)

Note: Transform execution order--write first!

Example:-webkit-transform:translatex (100px) scale (0.5); With-webkit-transform:scale (0.5) TranslateX (100px);

The first style scales 0.5 times times before performing the displacement 100px
The second style performs pan 100px and then zooms 0.5 times times when 100px is scaled to 50px

-transform-origin:; Transform base Point
The value can be a pixel or a keyword

-transform:matrix (); Matrix
Rotational displacement scaling is achieved through the matrix package

Matrix (1,0,0,1,0,0) standard default 6 parameters
(

Matrix (A,B,C,D,E,F);

Scaling
A,c,e represents x-axis scaling X-axis scaling: a:a* Zoom multiplier c:c* Zoom multiplier e:e* Zoom multiplier (e/c default is 0);
B,d,f represents the y-axis scaling Y-axis scaling: b:b* Zoom multiplier d:d* Zoom multiplier f:f* zoom factor (f/d default is 0);

Oblique cut
c also means x-axis chamfered C=math.tan (DEG/180*MATH*PI)
b also means y-axis oblique cut B=math.tan (DEG/180*MATH*PI)

Displacement
The length of the displacement displacement of the e:x axis is e+x; (e,f default value is 0)
The length of displacement displacement of f:y axis is f+y;

Rotating
A/B/C/D co-control rotation
A = Math.Cos (DEG/180*MATH*PI)
b = Math.sin (DEG/180*MATH*PI)
c =-math.sin (DEG/180*MATH*PI)
D = Math.Cos (DEG/180*MATH*PI)
)
Compatible with IE6 and above 2 parameters of missing displacement
Progid:DXImageTransform.Microsoft.Matrix (m11= 1, m12= 0, m21= 0, m22=1,sizingmethod= ' auto expand ');
Matrix (m11= A, m12= C, m21= B, m22=d,sizingmethod= ' auto expand ');
(

Note that the IE spin is not rotated around the center point of the element
Solution: Control element Left/top;
left = (parent offsetwidth-itself offsetwidth)/2
top = (parent offsetheight-itself offsetheight)/2
)

Reprinted from: http://www.cnblogs.com/dreamerC/p/6224443.html

CSS3 transitions and 2D transformations