iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

喪屍黑白切系列 第 25

Day 25 | 不是古代的那種翻牌 - 翻牌效果

今天想要來講一下好像是滿常見到的翻牌效果,
不想一下提供太多資訊的時候,這算是一個還不錯的方式,
讓使用者 hover 到物件上時,再顯示出更多的訊息,
還能讓別人有一種:「WOW~ 這個效果好酷噢!」的驚嘆。

本篇關鍵字

  • transform-style
  • backface-visibility
  • transform: rotate()

範例檔


(我不知道為什麼會有謎樣的藍藍線)

HTML

<div class="item">
  <div class="pic">
    <img src="https://picsum.photos/400/400/?random=1">
  </div>
  <h2>我是背面</h2>
</div>

CSS

body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item{
  width: 400px;
  position: relative;
  transform-style: preserve-3d;
}

.pic,h2{
  border-radius: 20px;
  overflow: hidden;
  backface-visibility: hidden;
  transition: 1s;
}

img{
  width: 100%;
  vertical-align: middle;
}

h2{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateX(180deg);
  background-color: orange;
}

.item:hover .pic{
  transform: rotateX(180deg);
}

.item:hover h2{
  transform: rotateX(360deg);
}

喪屍分解

  • transform-style 設定子層項目是位於 3D 空間中或是 2D 平面中
    • flat
    • preserve-3d
  • backface-visibility 是設定,當元素背面面向你的時候,要不要讓他顯示出來(safari 要設定 -webkit-backface-visibility
  • 剩下就是設定 :hovertransform: rotate 以及 transition 來做出翻轉的效果啦!

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是破格式設計。


上一篇
Day 24 | 遙想那個用表格排版的年代
下一篇
Day 26 | 打破規則,勇敢創新 - 破格式設計
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言