CSS
HTML
使用 CSS 做出卡片翻轉效果
2023/09/04 10:14:41
3
1468
效果
話不多說,直接看成果:
是不是很酷!!!看它翻轉真的很療癒欸(甚麼怪癖 XD)
製作方法
1. 架構
架構是一個外層的 card 裡面包 font 跟 back 的物件。
<div class='card'>
<div class='font'>Font</div>
<div class='back'>Back</div>
</div>
2. rotateY
當 hover 到 card 時,各自旋轉 Y 方向 180 deg,不過因為要設定一開始 back 在背面,所以先讓它轉 -180 deg,hover 時再轉回 0 deg。
.back {
transform: rotateY(-180deg);
}
.card:hover .font {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(0);
}
3. backface-visibility
在翻轉時會發現可以從背面看到前面倒轉的文字加背景,可以設定 backface-visibilty: hidden
,翻到背面時就看不到前面的東西囉!
.font,.back {
backface-visibility: hidden;
}
4. position: absolute
要讓兩個卡片疊在一起,只要使用絕對定位,就可以讓它疊在一起,記得在父層 card 設定 position: relative
才會定位在父層喔。
.card {
position: relative;
}
.font, .back {
position: absolute;
}
5. perspective
好像可以翻轉了,但是怎麼不太立體的感覺?這時候就要使用 perspective,可以想像有一台攝影機看著物件,後面接的數值就是跟它的相差的距離,距離越近,物件的 Z 軸會被放的更大,而距離越大,會越接近平面的效果。
可以使用下面的範例玩玩看~~