Which axis does css3 rotation rotate around?-CSS Tutorial-php.cn

Which axis does css3 rotation rotate around?

WBOY

Release： 2021-12-16 17:38:58

Original

3412 people have browsed it

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.

Which axis does css3 rotation rotate around?

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>

Copy after login

Output result:

Which axis does css3 rotation rotate around?

##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>

Copy after login

Output result:

Which axis does css3 rotation rotate around?

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>

Copy after login

Output result:

Which axis does css3 rotation rotate around?

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>

Copy after login

Output result:

Which axis does css3 rotation rotate around?

(Learning video sharing:

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!