📌  相关文章
📜  使用 HTML 和 CSS 设计旋转卡片效果

📅  最后修改于: 2021-08-30 09:45:17             🧑  作者: Mango

旋转卡片是当您将鼠标悬停在卡片上时卡片会旋转一定程度的效果。当您将鼠标悬停在卡片上时，卡片上将显示信息、链接或图像。

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

分步实施：

第 1 步：卡片的 HTML 文件

HTML


  

    

  

  
    
    

        GeeksForGeeks Rotating Card
    

      
    
  
        
        

    
  

HTML


  

    
  
    
    

  

  
    
    

        GeeksForGeeks Rotating Card
    

      
    
  
        
        

    
  

第2步：使用CSS装饰卡片正面：我们在HTML部分构建了卡片第一面的结构。现在我们需要设计具有不同CSS属性的卡片，关键是使用CSS的transform属性将卡片旋转45度即 变换：旋转(45度) 。所以，现在在里面添加下面写的 CSS 代码 头 标签。 

.card {
    position: absolute;
    width: 200px;
    height: 200px;
    display: inline-block;
    border-radius: 10px;
    padding: 15px 25px;
    box-sizing: border-box;
    cursor: pointer;
    margin: 10px 15px;
    transition: transform 0.5s;
    background-position: right;
    background-size: cover;
    transform: rotate(45deg);
}
  
.GFG {
    margin-top: 170px;
    margin-left: 600px;
    background-image: url(gfg.jpg);
}
  
.card:hover {
    transform: translateY(-10px);
}

注意：您可以尽可能多地轮换您的卡片，具体取决于 变换：旋转(45度) ，背景图像在图像文件夹中 我们将使用 url()访问该图像，而此url()将获取已保存图像的地址。

示例：提供完整的 HTML 代码作为示例以帮助您。这个例子使用 变换：旋转(45度)属性来旋转卡片。

HTML 



  

    
  
    
    

  

  
    
    

        GeeksForGeeks Rotating Card
    

      
    
  
        
        

    
  

输出：