CSS3 transition and 2D transformation, css32d Transformation

CSS3 transition and 2D transformation, css32d Transformation

Transition
Transition-duration:; motion time
Transition-delay:; delay Time
Transition-timing-function:; Motion Form
Slow (default)
Linear Speed
Memory-in acceleration
Slow-out deceleration
Slow-in-out acceleration before deceleration
The cubic-bezeiser curve (x1, y1, x2, y2) controls the trend of the curve to change the motion.

Note: In synchronous mode, perform the transition at the same time (if asynchronous transition is required, you need to add a parameter after the completion time: Delay Time)

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

Transitionend event(Events triggered after transition)
Note: 1. A tranasitionend is triggered every time a style of the element is changed.

In the webkit kernel:
Obj. addEventListener ('webkittransitionend', fn, false );
Written in the standard:
Obj. addEventListener ('transitionend', fn, false );

-Transform:; transform
Rotate (30deg) rotate around the element center point 30 degrees
The skewX (45deg) slice is stretched 45 degrees left along the X axis.
SkewY (45deg) oblique cut up 45 degrees along Y axis
Integrated Method: skew (45deg, 45deg)
ScaleX (2) scale out by 2 times of the center point along the X axis
ScaleY (0.5) scaling is doubled from the center point along the Y axis.
Scale (2, 0.5)
TranslateX (100px) Displacement: Px shifted from left to right
TranslateY (-100px) shift: Move 100px from bottom up
Translate (100px,-100px)

Note: transform execution sequence -- write first!

Example:-webkit-transform: translateX (100px) scale (0.5); and-webkit-transform: scale (0.5) translateX (100px );

The first style is scaled 0.5 times before the displacement is 100px.
The second style is first translated by 0.5 PX and then scaled by times. Then, 100px is scaled to 50px as the scale

-Transform-origin:; transform the base point
The value can be either pixel or keyword.

-Transform: matrix (); matrix
Rotation, displacement, scaling, and oblique cutting are all implemented through matrix encapsulation.

The default value of matrix (,) is 6.
(

Matrix (a, B, c, d, e, f );

Zoom
A, c, e Indicates X-axis scaling X-axis Scaling: a * scaling multiple c: c * scaling multiple e: e * scaling multiple (e/c is 0 by default );
B, d, f indicates Y-axis scaling Y-axis Scaling: B * scaling factor d: d * scaling factor f: f * scaling factor (f/d defaults to 0 );

Oblique Cutting
C simultaneously indicates X axis oblique cut c = Math. tan (Deg/180 * Math * PI)
B simultaneously indicates Y axis oblique cut B = Math. tan (Deg/180 * Math * PI)

Displacement
E: the length of the x axis displacement e + x; (the default value of e and f is 0)
F: length of the y-axis displacement f + y;

Rotate
A/B/c/d jointly 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. Two Parameters of displacement are missing.
Progid: DXImageTransform. Microsoft. Matrix (M11 = 1, M12 = 0, M21 = 0, M22 = 1, SizingMethod = 'autoexpand ');
Matrix (M11 = a, M12 = c, M21 = B, M22 = d, SizingMethod = 'Auto expand ');
(

Note that the rotation under IE is not centered around the center of the element.
Solution: Control Element left/top;
Left = (parent level offsetWidth-itself offsetWidth)/2
Top = (parent level offsetHeight-itself offsetHeight)/2
)