資料結構
網路
關係資料庫管理系統 (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 次瀏覽
廣告