使用 CSS 平铺透视列表网格悬停动画

平铺透视列表网格悬停动画可以通过使用 nth-child CSS 属性和显示网格来创建。每个列元素样式和悬停效果都不同，这种效果提供了很好的透视效果。

方法：

• 创建一个名为index.html的 HTML 文件。
• 在 HTML 中创建一个ul列表元素。
• 创建一些li 列出上面步骤中创建的ul中的元素。
• 在 CSS 中添加样式。
• 使用nth-child 在 CSS 中获取列表的所需子元素并相应地设置样式。
• 对于 3D 透视外观，请使用变换 CSS 中的属性并使用perspective()方法来实现外观。
• CSS透视()函数定义了一个变换，用于设置用户和 z=0 平面之间的距离。
• 要获取第一列的元素，可以使用nth-child(3n+1) ，这意味着从列表的第一个元素开始每隔三个元素。同理， nth-child(3n+2) 和第 n 个孩子(3n+3) 可用于分别设置第 2 列和第 3 列的样式。
• 要获得网格外观，可以使用显示网格来重复 3 列，中间有一些网格间隙。

HTML 代码：下面的代码演示了上面提到的index.html文件。

HTML

    
    
    
     
    

  

    
    

        
GeeksforGeeks
        
GFG
        
GFG
        
GeeksforGeeks
        
GeeksforGeeks
        
GFG
        
GFG
        
GeeksforGeeks
        
GeeksforGeeks
        
GFG
        
GFG
        
GeeksforGeeks
        
GeeksforGeeks
        
GFG
        
GFG
    

  

输出：

平铺透视列表网格