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

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:

   
  Hello World

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:

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:

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:

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!