数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用HTML和CSS设计旋转卡片效果
当您将鼠标悬停在卡片上时，卡片会稍微旋转的效果称为旋转卡片。悬停在卡片上将显示卡片上存在的任何信息、链接或图像。
让我们深入探讨这篇文章，我们将使用HTML和CSS设计旋转卡片效果，其中我们将使用HTML的<div>标签。在进入正题之前，让我们快速了解一下<div>标签。
HTML <div>标签
<div>标签也称为分区标签。HTML使用<div>标签创建内容分区，用于文本、图形、标题、页脚、导航栏等。div标签有开始(<div>)和结束(</div>)标签，结束标签是必须的。由于它允许我们为页面上的不同类型的数据或功能构建特定的部分，因此<div>标签在Web开发中最有用。它帮助我们将页面上的数据分割开来。
语法
以下是HTML <div>标签的语法
<div>…..</div>
示例
让我们来看下面的例子，我们将在这个网页上设计一个旋转卡片效果。
<!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 次浏览
广告