html css transform flipping animation

用css transform做出簡單的翻牌效果

劉晏瑞 Ray Liu 2021/12/29 09:01:38
1119

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選項
或是把它放大一點並改成左右翻轉,可以作成產品牌卡,前面放圖片跟簡述價格等,後面放詳細敘述

 

 

 

圖片出處

自己

 

參考資料

MDN - rotate3d

使用SCSS製作3D立體正方型搭配微動畫

劉晏瑞 Ray Liu