Webというデジタルなデザインの中に、紙を表現したくなる時は多々あります。そんな中で本を開くようなアニメーションは魅力的なものの1つ。

でも、軽く調べてもなかなかシンプルなものが見つからなかったので、トライしてみたらCSSだけでできたのでメモ。

まずは完成品...。

hoverでアニメーションします。

一応想像通りのものができたかなと。animationとかと組み合わせれば何ページものページアニメーションもできそう。

<section class="book">
  <div class="page"></div>
  <div class="page open"></div>
</section>

HTMLはシンプルで、本の大枠.bookと 各ページ.pageのみ。

CSS：遠近感を出す perspective を使う

.book {
  perspective: 110vh; //これが遠近感を出す！！
}
.open {
  transition: 1s; //アニメーションにかかる時間
  transform-origin: left; //動きの中心は左に
  transform: rotateY(-180deg); //最初は閉じておく
}
.book:hover .open {
  transform: rotateY(.1deg); //0degにすると戻る時にアニメーションが効かなくなる
}

perspectiveで遠近感を出して、transformで動きを作る。でも、どうやら完全平面(0deg)からの遠近感は出ないみたいで、小さな値を入れておく。

perspectiveを指定せず、transform: rotateYだけだと平面的な動きになり、横幅が変わってるだけに見えてしまう。

perspective なしバージョン

perspective のブラウザ対応状況

{{}}

---

初スマホのiPhone11Proを画面から落として、保護ガラスを貫通して画面が割れました。さらに、カメラとライトが機能しなくなりました。

iPhone落として画面割って、カメラとライトが使えなくなった...あ〜。

— 2001Y (@Y20010920T) August 15, 2020

さてさて、どうするかな。。。😓