今天給大家分享一個有關(guān) HTML 的點(diǎn)擊翻轉(zhuǎn)特效代碼。
<!DOCTYPE html>
<html>
<head>
<title>點(diǎn)擊翻轉(zhuǎn)特效代碼</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>點(diǎn)擊翻轉(zhuǎn)特效</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 是一個盒子，通過設(shè)置它的 perspetive 屬性創(chuàng)建3D空間；.flip-box-inner 是該盒子的一個子元素，并包含了兩個子元素 .flip-box-front 和 .flip-box-back；通過將 .flip-box-inner 的 transform-style 屬性設(shè)置為 preserve-3d 來保持 3D 空間，同時使用 backface-visibility 屬性確保設(shè)定的反面不會在翻轉(zhuǎn)過程中顯示出來。
當(dāng)鼠標(biāo)放在 .flip-box 上時，通過設(shè)置: hover 偽類選擇器來實(shí)現(xiàn)翻轉(zhuǎn)效果，即將 .flip-box-inner 元素沿 Y 軸旋轉(zhuǎn) 180 度。
這樣一個簡單的 HTML 點(diǎn)擊翻轉(zhuǎn)特效就實(shí)現(xiàn)了。使用這種特效可以使網(wǎng)站界面更加生動，吸引用戶的注意力。
上一篇vue怎么拍volg
下一篇docker安裝器卡死