今天給大家分享一個有關 HTML 的點擊翻轉特效代碼。
<!DOCTYPE html>
<html>
<head>
<title>點擊翻轉特效代碼</title>
<style>
.flip-box {
background-color: transparent;
width: 220px;
height: 220px;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: #555;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<h2>點擊翻轉特效</h2>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h3>正面</h3>
</div>
<div class="flip-box-back">
<h3>反面</h3>
</div>
</div>
</div>
</body>
</html>以上代碼中，.flip-box 是一個盒子，通過設置它的 perspetive 屬性創建3D空間；.flip-box-inner 是該盒子的一個子元素，并包含了兩個子元素 .flip-box-front 和 .flip-box-back；通過將 .flip-box-inner 的 transform-style 屬性設置為 preserve-3d 來保持 3D 空間，同時使用 backface-visibility 屬性確保設定的反面不會在翻轉過程中顯示出來。
當鼠標放在 .flip-box 上時，通過設置: hover 偽類選擇器來實現翻轉效果，即將 .flip-box-inner 元素沿 Y 軸旋轉 180 度。
這樣一個簡單的 HTML 點擊翻轉特效就實現了。使用這種特效可以使網站界面更加生動，吸引用戶的注意力。
上一篇vue怎么拍volg
下一篇docker安裝器卡死