如何使用 CSS 创建响应式堆叠卡片悬停效果？

简介：卡片是任何网站的一个非常重要的部分。用于向浏览者简要展示一些重要信息。在本文中，我们将使用 HTML 和 CSS创建响应式堆栈卡片悬停效果。为了实现多层堆叠效果，您必须遵循下面给出的某些步骤。

注意：通过在卡片上悬停，我们可以在卡片上实现各种方向或效果，如左上、右下、对角线、旋转等。

方法：首先，我们将在 HTM 中设计一个简单的卡片结构。现在我们将使用一些 CSS 属性来构建卡片的基本设计并创建堆叠效果，我们将定义::before 和::之后 伪元素并将它们相对于父卡片绝对定位。现在我们必须使用transform属性将类“card-inner”的div从其原始位置移开。最后，通过使用可以在悬停效果前后转换卡片的变换，在一堆卡片上添加悬停效果。

让我们看看上述方法的实现。

示例 1：在此示例中，我们将看到用户将鼠标悬停在卡片上时 Top Card 将在X 轴和Y 轴上平移，此处为 (5px-X-axis, 5px-Y-axis) 右下方向和下方堆叠卡片将平移 ( -X ) 轴和 ( -Y ) 轴，即与右下角方向相反，这将在伪元素前后的帮助下创建多个堆叠右下角效果。

HTML

  

    
    

  

    
        
Welcome to GeeksforGeeks
        

            

                

                    
Down-Right
                    

                        GeeksforGeeks
                    
                    

                        A Complete Portal for Geeks.
                    
                
            
        
    

  

输出：

示例 2：在此示例中，我们将使用与上述相同的方法查看 stacked-diagonal-left和stacked-rotate-left。

堆叠-旋转-左：

1. Top Card 只会在 X 轴上平移，这里是 ( translate(2.5px, 0) ) 向左方向，并以一定的角度旋转，这里是 2.5 度 (rotate(2.5deg) ) .then
2. 下面的堆叠卡片也将在同一方向上平移和旋转，但具有双像素，借助前后伪元素创建堆叠的多层效果。

堆叠对角线左：

1. 在 diagonal-left 中，最初使用 transform:translate属性将多层堆叠卡定位在与方向左相反的方向（ translate(-16px, -16px) ），然后
2. 当用户将鼠标悬停在卡片上时，堆叠的多层卡片将使用相同的值（即 translate(16px, 16px) ）平移到对角线左方向，但符号相反，以便堆叠的多层卡片可以覆盖相同的方向。

HTML

  

    

  

    
        
Welcome to GeeksforGeeks
        

            

                

                    
Diagonal-Left
                    
GeeksforGeeks
                    

                        A Complete Portal for Geeks.
                    
                
            
        
        

            

                

                    
Rotate-Left
                    
GeeksforGeeks
                    

                        A Complete Portal for Geeks.
                    
                
            
        
    

  

输出：

示例 3：在此示例中，我们将使用与上述相同的方法查看 stack-Up和stack-Right 效果。

叠起来：

1. Top Card 只会在负 Y 轴上平移，这里 (translate(0, -5px)) 向上，然后
2. 下面的堆叠卡片将平移正 Y 轴，即与向上方向相反，它也会沿 Y 轴缩放，这将在伪元素前后的帮助下创建多个堆叠效果。

堆叠右：

1. Top Card 只会在正 X 轴上平移，这里 ( translate(5px, 0) ) 向右，然后
2. 堆叠卡片下方将平移负 X 轴（ translate(-10px, 0) ），即与正确方向相反，它还将沿负 X 轴缩放，这将在伪元素前后的帮助下创建多个堆叠效果.

HTML

  

    

  

    
        
Welcome to GeeksforGeeks
        

            

                

                    
Stacked-Up
                    
GeeksforGeeks
                    

                        A Complete Portal for Geeks.
                    
                
            
        
        

            

                

                    
Stacked-Right
                    
GeeksforGeeks
                    

                        A Complete Portal for Geeks.
                    
                
            
        
    

  

输出：