The attribute that achieves rotation effect in css3 is "transform". The transform attribute is used to apply a 2D or 3D transformation to an element. Rotation can be achieved when this attribute is used with the rotate(), rotate3d(), rotateX(), rotateY() or rotateZ() functions.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The attribute that implements the rotation effect in css3 is "transform".

The transform attribute is used to apply 2D or 3D transformation to the element. When this attribute is used with the following function, the element rotation can be achieved:

• rotate(angle ) Define 2D rotation and specify the angle in the parameters.

• rotate3d(x,y,z,angle) Define 3D rotation.

• rotateX(angle) Defines a 3D rotation along the X-axis.

• rotateY(angle) Defines 3D rotation along the Y axis.

• rotateZ(angle) Defines 3D rotation along the Z axis.

Example 1:

     
  
Hello
  

Example 2:

     
  
CSS3 元素旋转
  
 
 
 
 
rotate(45deg) 
 
 
 
 
 
 
rotateX(45deg)
 
 
 
 
 
 
rotateY(45deg)
 
 
 
 
 
 
rotateZ(45deg) 
 
  

(Learning video sharing:css video tutorial)

The above is the detailed content of What are the attributes used to achieve rotation effects in css3. For more information, please follow other related articles on the PHP Chinese website!