Home > Article > Web Front-end > What is the function to implement 2D rotation in css3
What is the function to implement 2D rotation in css3
- WBOYOriginal
- 2021-12-14 17:37:392563browse
The function that implements 2D rotation in css is the "rotate()" function. The rotate() function can be used in conjunction with the transform attribute, and the syntax is "element {transform:rotate(angle value);}"; when the parameter angle is a positive number, the element rotates clockwise, and when the parameter angle is a negative number, the element rotates counterclockwise.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What is the function that implements 2d rotation in css3
In css, the function that implements 2d rotation is the rotate() function.
When the rotate() function is used with the transform attribute, it can perform 2D rotation operations on elements.
The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
transform:rotate(9deg);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>Output result:
css video tutorial）
The above is the detailed content of What is the function to implement 2D rotation in css3. For more information, please follow other related articles on the PHP Chinese website!