入门 CSS 旋转动画

Primer CSS动画通常用于引起用户对动画元素的注意并获得更好的用户体验。

在本文中，我们将看到Primer CSS 旋转动画。要将旋转动画应用于元素，我们必须将anim-rotate类添加到元素。具有旋转动画的元素将围绕其变换原点坐标无限旋转，在大多数情况下，该坐标是元素的中心。

入门 CSS 旋转动画类：

• anim-rotate：此类用于将旋转动画应用于元素。

句法：

 
    Content... 

示例 1：此示例展示了使用anim-rotate类来旋转一个简单的 Primer CSS 按钮。

HTML

  

    
    
    
    
    

  

    

        
GeeksforGeeks
        
Primer CSS - Rotation Animation
    
    

        
            Rotating Button
        
    

  

输出：

示例 2：此示例通过向图像添加anim-rotate类来显示图像的旋转。

HTML

  

    
    
    
    
    

  

    

        

            GeeksforGeeks
        
        
Primer CSS - Image Rotation Animation
    
    

        
    

  

输出：

参考： https://primer.style/css/utilities/animations#rotation