Zenn
🕌

flipするdivをつくる

2021/12/29に公開
CSS
HTML
tech

ただのメモ

unity learnのページ左下にあるflipするボタンがかっこいいなって思ったので、どうやってｆlip実装するのか調べた.

unity learnig

コード

下記で動いた

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.flip {
  background-color: transparent;
  width: 64px;
  height: 64px;
  perspective: 1000px;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}

.flip:hover > .flip-inner {
  transform: rotateY(180deg);
}

.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
}

.flip-front {
  background-color: black;
  color: white;
}

.flip-back {
  background-color: black;
  color: red;
  transform: rotateY(180deg);
}

</style>
</head>
<body>
  <div class="flip">
    <div class="flip-inner">
      <div class="flip-front">
        <p>o</p>
      </div>
      <div class="flip-back">
        <p>x</p>
      </div>
    </div>
  </div>
</body>
</html>

実行

flip gif

解説

flip-back,flip-frontで表裏の要素を設定.
flip-backの方はtransform: rotateY(180deg); 回転させておく.
backface-visibilityで回転したときの背面をレンダリングしない.
transform-style: preserve-3d で奥行き方向のレンダリング維持が可能になる.
perspective: 1000px で透視投影したときのカメラの離れた距離を規定する.
transform: transform 0.4s で0.4秒で移動を実行.
あとは、hoverしたときにback/frontの親要素を反転させることでアニメーション.

最近のｃssは3d描画もできてすごい..

Discussion