如何使用 HTML 和 CSS 在鼠标悬停时旋转文本？

鼠标悬停时文本的旋转称为旋转效果或旋转效果。在这种效果中，单词的每个字母都随着任何一个轴(最好是 Y 轴)旋转。每个单词都包含在

标签中，然后使用CSS:hover Selector选择器我们将在 Y 轴上旋转每个字母。我们将这篇文章分为两部分，在第一部分中，我们将创建将旋转的文本的基本结构。在第二部分中，当用户将鼠标悬停在该文本结构上时，我们将使该文本结构可旋转。

创建结构：在本节中，我们将使用 HTML 创建结构。

• HTML 代码：在此我们创建了一个无序列表并将每个字母包装在一个列表项(li)中。

  
  
      
          
          
          
      
      
          
  
              
  G
              
  e
              
  e
              
  k
              
  s
              
  f
              
  o
              
  r
              
  G
              
  e
              
  e
              
  k
              
  s
          
      
  
  

设计结构：在本节中，我们将使该结构可旋转并添加一点装饰。

• CSS 代码：首先我们提供了一些基本的样式，如边距、填充和背景。然后我们使用 float 属性水平对齐我们的列表项。最后，使用悬停选择器在特定角度沿 Y 轴旋转每个字母。如果您愿意，可以使用第 n 个子属性对每个字母表的旋转应用一些延迟。第 n 个子属性的使用取决于个人喜好和需求，因此如果您想使用它，您肯定可以使用它。

最终解决方案：就是上面两个代码的组合。

    
        
        
        
        
    
    
        

            
G
            
e
            
e
            
k
            
s
            
f
            
o
            
r
            
G
            
e
            
e
            
k
            
s
        
    

输出：