純 css 實現翻轉（flip）效果

這是我參與更文挑戰的第3天，活動詳情查看： 更文挑戰

實現效果

當鼠標滑過包含塊時，元素總體翻轉 180°，以實現正反面的切換。

內容組成

1. 首先須要一個最外層的 card 來包裹整個翻轉區域
2. 而後須要正面和反面的內容（這裏簡單處理只設置正反面的背景顏色來區分）

利用佈局

須要讓正面和反面重疊在一塊兒，很容易想到外層 card 用相對定位，內層正反都使用絕對定位都相對於外層 card，使其重疊，而後須要設置反面翻轉 180°，翻轉隱藏背面須要添加 backface-visibility:hidden。

注意：都是絕對定位元素後來居上，因此正面須要放到反面後面，或者直接設置正面 z-index 大於反面

實現 3D 效果

翻轉效果實際上是一個 3D 效果，因此這裏須要用到一個屬性 transform-style 使得子元素可以表現出翻轉效果，同時還要設置 transition 實現過渡動效。

transition 須要一個狀態就是 hover 卡片時，卡片翻轉也就是 card 翻轉 180°

補充說明

若是想實現垂直翻轉就修改 rotateY 爲 rotateX

若是想經過點擊事件來觸發翻轉，那麼在點擊事件中添加刪除 card 的類便可

重點總結

• 動畫效果：添加 transition 過分
• 正反重疊：最外層相對定位，內部正反兩面絕對定位，反面先翻轉 180°
• 隱藏背面：正反面添加 backface-visibility:hidden
• hover 翻轉：卡片 hover 翻轉 180°
• 3D 效果：卡片添加 transform-style 使子元素 3D 空間呈現

具體代碼實現

<div class="card-filp">
  <div class="back"></div>
  <div class="front"></div>
</div>

<style> .card-filp { height: 200px; width: 200px; position: relative; transform-style: preserve-3d; transition: 1s; } .front, .back { height: 100%; width: 100%; position: absolute; left: 0; top: 0; backface-visibility:hidden } .front { background: lightgreen; } .back { background: lightblue; } .back { transform: rotateY(180deg); } .card-filp:hover { transform: rotateY(180deg); } </style>
複製代碼