用css transform做出簡單的翻牌效果
Rotate3D 簡介
rotate3D 是一個css transform 的 function，使用方法可以先參考這篇 MDN 的說明文章
基本運作方式就是讓dom元素在x,y,z三軸(如下圖)進行翻轉
本文目標
今天要實作的目標是讓自訂按鈕在滑鼠移入時
搭配 transform-style: preserve-3d; (可參考這篇)
依X軸翻轉至背面隱藏的訊息
如下圖demo
註記: 此UI設計須將滑鼠移入才能看到隱藏訊息，為互動性較高的設計方式，同時也相對不直觀
HTML結構
看上圖demo可知這個按鈕的結構大概分成三片
1. 按鈕前的字 'Front'
2. 按鈕本身
3. 按鈕前的字 'Behind'
我們先大概寫一個HTML結構大概像這樣
運作方式是讓第一層 div 滑鼠移入的時候，對第二層 div 沿 x軸做 3D翻轉
此時上述的三片會一起作動，讓後面的 'Behind' 文字翻轉到前面
可能有人會問 "那為什麼不直接對第二層 div 滑鼠移入時做翻轉就好，還要再包一層?"
是因為在翻轉的時候，這層滑鼠移動的作用域會跟著變扁。 如下圖
我們在外面再包一層 div 可以確保它不會因為翻到一半變扁，而吃不到滑鼠移入的效果
寫好就可以幫這些HTML Elements取樣式名稱了，如下圖
我們先讓前述說的那三片
1. 按鈕前的字 'Front'
2. 按鈕本身
3. 按鈕前的字 'Behind'
用 position: absolute 重疊在一起
這時候應該是三片疊在一起的狀態，那我們再用 transfrom: translateZ() 讓它們在Z軸上區分開來
並讓這些字能夠水平垂直置中在自己的 container 裡，我們下這個 class 樣式給它們
好的，前置作業已經差不多了，我們來處理hover時的翻轉效果
這時候的成果應該會像這種東西
可以發現兩個問題
1. 它是直接翻過來的
2. 'Behind' 因為翻轉的關係長的怪怪的
先處理1.
給翻轉的元素下 'transition: 0.5s linear' 樣式
它會翻轉過程中用 0.5秒的時間以 '線性' 方式轉到背面去
2.
只要把behind也一樣用 rotate 的方式轉到正的就好了，像這樣
都改好之後應該就大功告成了！
HTML :
<div class="vertical-rotate-cell">
<div class="vertical-rotate-container grid-central">
<div class="vertical-rotate-front text-container grid-central">
<span class="vertical-rotate-text">Front</span>
</div>
<div class="vertical-rotate-central">
</div>
<div class="vertical-rotate-behind text-container grid-central">
<span class="vertical-rotate-text">Behind</span>
</div>
</div>
</div>
CSS :
.grid-central{
display: grid;
place-items: center;
}
.vertical-rotate-container{
position: relative;
width: 200px;
height: 40px;
transform-style: preserve-3d;
transform: rotateX(0deg);
transition: 0.5s linear;
}
.vertical-rotate-cell:hover > .vertical-rotate-container{
transform: rotateX(180deg);
}
.vertical-rotate-central{
width: 200px;
height: 40px;
background-color: #796eef;
box-shadow: 0 0 20px #796eef;
border-radius: 5px;
}
.text-container{
position: absolute;
width: 100%;
height: 100%;
}
.vertical-rotate-text{
color: white;
}
.vertical-rotate-front, .vertical-rotate-behind{
font-size: 30px;
cursor: default;
}
.vertical-rotate-front{
transform: translateZ(20px);
}
.vertical-rotate-behind{
transform: translateZ(-20px) rotateY(180deg) rotateZ(180deg);
}
讓它們排在一起，並將剛剛給的 transition 改成 0.2s 可以做成像下面的效果
可使用在像是menu選項
或是把它放大一點並改成左右翻轉，可以作成產品牌卡，前面放圖片跟簡述價格等，後面放詳細敘述
自己
