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

当您将鼠标悬停在卡片上时，卡片会稍微旋转的效果称为旋转卡片。悬停在卡片上将显示卡片上存在的任何信息、链接或图像。

让我们深入探讨这篇文章，我们将使用HTML和CSS设计旋转卡片效果，其中我们将使用HTML的<div>标签。在进入正题之前，让我们快速了解一下<div>标签。

HTML <div>标签

<div>标签也称为分区标签。HTML使用<div>标签创建内容分区，用于文本、图形、标题、页脚、导航栏等。div标签有开始(<div>)和结束(</div>)标签，结束标签是必须的。由于它允许我们为页面上的不同类型的数据或功能构建特定的部分，因此<div>标签在Web开发中最有用。它帮助我们将页面上的数据分割开来。

语法

以下是HTML <div>标签的语法

<div>…..</div>

示例

让我们来看下面的例子，我们将在这个网页上设计一个旋转卡片效果。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background: #D5F5E3;
         font-family: 'Blackadder ITC';
      }
      .tutorial {
         position: absolute;
         top: 52%;
         left: 52%;
         width: 290px;
         height: 290px;
         margin: -149px;
         perspective: 300px;
      }
      .tutorial1 {
         width: 100%;
         height: 100%;
         box-shadow: 0 0 10px #DE3163;
         transition: transform 0.5s;
         transform-style: preserve-3d;
      }
      .tutorial:hover .tutorial1 {
         transform: rotateY(180deg);
         transition: transform 0.5s;
      }
      .tp1,
      .tp2 {
         position: absolute;
         height: 100%;
         width: 100%;
         background: #EBF5FB;
         line-height: 290px;
         color: #6C3483;
         text-align: center;
         font-size: 40px;
         backface-visibility: hidden;
      }
      .tp2 {
         background: #FEF9E7;
         color: #239B56;
         transform: rotateY(180deg);
      }
   </style>
</head>
<body>
   <div class="tutorial">
      <div class="tutorial1">
         <div class="tp1"> TutorialsPoint </div>
         <div class="tp2"> The E-way Learning. </div>
      </div>
   </div>
</body>
</html>

运行上述代码后，输出窗口将弹出，显示应用了CSS的卡片以及显示在网页上的文本。当用户将鼠标悬停在卡片上时，它开始旋转180度并显示卡片的另一面。

更新于：2024年1月22日

396 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告