Through CSS3 transformation, we can move, scale, rotate, lengthen or stretch elements. Use the transform property to apply a transform to an element.

1, transform: transform elements.

2. Transition: control (time, etc. The change of one or more attributes of an element is similar to the tween animation of flash. But there are only two keys. Start, end.

I. CSS3 2D conversion

Transformation property of 1, 2D transformation

2. Conversion method

① Mobile translation

Translate(x, y) moves horizontally and vertically at the same time (that is, the x axis and the y axis move simultaneously).

TranslateX(x) only moves horizontally (x-axis movement).

TranslateY(Y) only moves vertically (y-axis movement).

②. Scaling ratio

Scale(x, y) scales the element horizontally and vertically (that is, the x axis and the y axis are scaled at the same time).

ScaleX(x) element only scales horizontally (x-axis scaling).

ScaleY(y) element only scales vertically (y-axis scaling).

Radial; radial

Rotates the element at a given angle clockwise. Negative values are allowed, so the element rotates counterclockwise.

④ Incline and skew

Skew(x, y) inclines the elements in both horizontal and vertical directions (the X-axis and Y-axis are inclined and deformed at the same time).

SkewX(x) only causes the elements to tilt in the horizontal direction (X-axis tilt deformation).

SkewY(y) tilts elements only in the vertical direction (y-axis tilt).

Thank you for reading. I hope this article will be helpful to your study.

Click: Join