transform attribute in CSS3

In CSS3, you can use the transform function to achieve four types of deformation processing: rotation, scaling, tilting, and movement of text or images.

一.rorate(rotation)

Usage: transform: rorate(45deg);

There is one parameter "angle", the unit deg means degree, Positive numbers represent clockwise rotation, and negative numbers represent counterclockwise rotation. The above code functions to rotate 45 degrees clockwise.

二.scale(scale)

Usage: transform: scale(0.5,3);

The first parameter represents the scaling in the horizontal direction, and the second parameter Represents the vertical zoom factor.

三.skew(skew)

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

The default origin of skew is transform-origin which 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.

4.translate(move)

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

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

The above is the detailed content of transform attribute in CSS3. For more information, please follow other related articles on the PHP Chinese website!