今天想要來講一下好像是滿常見到的翻牌效果，
不想一下提供太多資訊的時候，這算是一個還不錯的方式，
讓使用者 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）
• 剩下就是設定 :hover、transform: rotate 以及 transition 來做出翻轉的效果啦！

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