How to use the transform attribute

Four types of transformations such as rotation, scaling, tilting and movement of elements can be achieved through the transform attribute.

In CSS3, you can use the transform function to achieve four types of deformation processing: rotation, scaling, tilting, and movement of text or images. Next, in the article, I will introduce you to how to use the transform attribute in detail

[Recommended course: css3 tutorial]

Rotate rotate

Usage:

transform: rotate(45deg);

A parameter angle, the unit deg means degrees, positive numbers mean clockwise rotation , negative numbers represent counterclockwise rotation, and the above code is used to rotate 45 degrees clockwise

div{
	width:200px;
	height: 200px;
	background-color: pink;
	transform: rotate(55deg);
}

Rendering:

##Scale scale

Usage:

transform: scale(0.5)  或者  transform: scale(0.5, 2);

The parameter indicates the zoom factor;

When one parameter is used: it indicates that the magnification is scaled horizontally and vertically at the same time

Both When there are two parameters: the first parameter specifies the zoom ratio in the horizontal direction, and the second parameter specifies the zoom ratio in the vertical direction.

div{
	width:200px;
	height: 200px;
	background-color: pink;
	transform: scale(0.5,1.2)
}

Rendering:

skewskew

Usage:

transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

The parameter represents the tilt angle, the unit is deg

When there is one parameter: it represents the tilt angle in the horizontal direction;

When there are two parameters: the first parameter represents the horizontal direction Tilt angle, the second parameter represents the tilt angle in the vertical direction.

div{
	width:200px;
	height: 200px;
	background-color: pink;
	transform: skew(30deg, 30deg)
}

Rendering:

Mobile translate

Usage:

transform: translate(45px)  或者 transform:  translate(45px, 150px);

The parameter represents the moving distance, unit px,

When there is one parameter: it represents the moving distance in the horizontal direction;

When there are two parameters: the first parameter represents the horizontal direction The moving distance, the second parameter represents the vertical moving distance

div{
	width:200px;
	height: 200px;
	background-color: pink;
	transform:translate(45px, 150px);
}

Rendering:

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