HTML |翻转卡片

翻转卡片是您网站中的卡片，当您将鼠标悬停在它们上面时会翻转。当您将鼠标悬停在卡片上时，卡片背面将显示信息、链接或图像。

在本文中，您将学习如何仅使用 HTML 和 CSS 在您的网站上制作翻转卡片。

卡片的 HTML 文件：

    
HTML | Flip a Card
      
    

        

              
            
            
        
          
        
        

            
GeeksforGeeks
            
A Computer Science Portal for Geeks
              
            
               Try our ide
            
        
    

使用CSS装饰卡片的正反面：在HTML部分构建卡片的两个面的结构。现在我们需要首先隐藏背面。所以我们通过backface-visibility: hidden属性来实现这一点：CSS 和 card-front和card-back类的隐藏属性，这样当正面可见时，背面是隐藏的，反之亦然。关键是使用CSS的transform属性将元素旋转180度即transform:rotateY(180deg) 。

注意：您可以根据变换尽可能多地旋转卡片：rotateY(180deg) 。如果您减少 deg 并增加 deg 旋转取决于此，您也可以垂直翻转卡片。

示例：此示例使用transform: rotateY(180deg)属性来翻转/旋转图像。如果将 Y 轴更改为 X，则卡片将更改翻转方向。

  

    
  
    
    

  

    
        

            
HTML | Flip Card
            

                

                    
                
                  
                

                    
GeeksforGeeks
                    
A Computer Science Portal for Geeks
                      
                    
                        Try our ide
                    
                
            
        
    

  

输出：