📜  使用 HTML 和 CSS 设计旋转卡片效果

📅  最后修改于: 2021-10-29 05:55:25             🧑  作者: 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     

                                
    
  

输出: