transform deformation

transform deformation

We can be performed by moving the elements CSS3 transformation, scaling, rotation, elongation or stretching. Using transform attribute transform is applied to the element.

1, Transform: deformation of the elements.

2, Transition: element changes a property of one or more properties, controls (time, etc.), between similar flash tween. But only two key infidelity. start end.

A .CSS3 2D conversion

1,2D Transform Conversion property

2, Transform method

①. Mobile translate

translate (x, y) in the horizontal direction and a vertical direction while moving (i.e. X-axis and Y-axis movement at the same time)

translateX (x) only horizontal movement direction (X-axis)

translateY, (Y) to move only in the vertical direction (Y axis movement)

②. Zoom scale

scale (x, y) so that the horizontal and vertical directions elements simultaneously scaling (i.e. X-axis and Y-axis simultaneous zoom)

scaleX (x) element is only scaled horizontally (X-axis scale)

scaleY (y) is scaled vertically only element (Y-axis scale)

③. Rotate rotate

In a given degree clockwise rotation element. Negative values ​​are allowed, so that the rotating element is counterclockwise.

④. Tilt skew

skew (x, y) while being inclined so that the element (X-axis and Y-axis values ​​at the same time a certain tilt angle deformation) in the horizontal and vertical directions

skewX (x) only in that the deformation element is inclined horizontal direction (X axis tilt deformation)

skewY (y) only the deformed element is inclined vertical direction (Y axis tilt deformation)

If you think I'm pretty good article to write, then it concerns the collection Oh!

We can discuss it with the front-end problem!

rgz987

Reproduced in: https: //juejin.im/post/5d011196518825361d02af9a