![「[CSSだけ]perspectiveで本を立体的に開くアニメーション」のアイキャッチ画像](/images/tmb/css-perspective-book.jpg)
Webというデジタルなデザインの中に、紙を表現したくなる時は多々あります。そんな中で本を開くようなアニメーションは魅力的なものの1つ。
でも、軽く調べてもなかなかシンプルなものが見つからなかったので、トライしてみたらCSSだけでできたのでメモ。
## まずは完成品…。
hoverでアニメーションします。
一応想像通りのものができたかなと。`animation`とかと組み合わせれば何ページものページアニメーションもできそう。
“`html
“`
HTMLはシンプルで、本の大枠`.book`と 各ページ`.page`のみ。
## CSS：遠近感を出す `perspective` を使う
“`css
.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
さてさて、どうするかな。。。😓