Home > Web Front-end > CSS Tutorial > What is the function to implement 2D rotation in css3

What is the function to implement 2D rotation in css3

WBOY
Release: 2021-12-14 17:37:39
Original
2593 people have browsed it

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.

What is the function to implement 2D rotation in css3

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>
Copy after login

Output result:

What is the function to implement 2D rotation in css3

##(Learning video sharing:

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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template