Transform property in CSS3

In CSS3, you can use the transform feature to rotate, scale, tilt, and move the four types of warp processing for text or images.

I. Rorate (rotation)

Usage: transform:rorate (45DEG);

A total of one parameter "angle", the unit deg is the meaning of degrees, positive number is clockwise rotation, negative number is counterclockwise rotation, the above code function is clockwise rotation 45 degrees.

Two. scale (zoom)

Usage: Transform:scale (0.5,3);

The first parameter represents scaling in the horizontal direction, and the second parameter represents a zoom multiplier in the vertical direction.

Three. Skew (tilt)

Usage: Transform:skew (30deg, 30deg);

The default origin of skew is that Transform-origin is the center point of this object.

The first parameter represents the tilt angle in the horizontal direction, and the second parameter represents the tilt angle in the vertical direction.

Four. Translate (mobile)

Usage: transform:translate (45px, 150px);

The first parameter represents a distance of 45 pixels in the horizontal direction, and the second parameter represents a distance of 150 pixels from a vertical inverse.