Home > Article > Web Front-end > Which axis does css3 rotation rotate around?
Which axis does css3 rotation rotate around?
- WBOYOriginal
- 2021-12-16 17:38:583353browse
There are many situations of rotation in css3: 1. The rotation realized by the "rotateX()" function is around the X axis; 2. The rotation realized by the "rotateY()" function is around the Y axis; 3. "rotateZ" ()" function realizes rotation around the Z axis; 4. "rotate()" function realizes rotation around the origin.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
css3 rotation is about which axis
In css, rotation can be clockwise, counterclockwise, or around X, Y or Z axis rotation, different rotation styles correspond to different functions.
1. "rotate()" function
Use the "rotate()" function to rotate the element clockwise or counterclockwise.
The example is as follows:
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>Output result:
##2. "rotateX()" function
Use the "rotateX()" function to rotate the element around the X axis. The example is as follows:<html>
<head>
<style>
img{
transform:rotatex(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>Output result:
3. "rotateY()" function
Use " rotateY()" function can rotate the element around the Y axis. The example is as follows:<html>
<head>
<style>
img{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>Output result:
4, "rotateZ( )" function
Use the "rotateZ()" function to rotate the element around the Z axis. The example is as follows:<html>
<head>
<style>
img{
transform:rotateZ(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>Output result:
css video tutorial)
The above is the detailed content of Which axis does css3 rotation rotate around?. For more information, please follow other related articles on the PHP Chinese website!