CSS
Tech
【TailwindCSS】CSS で 3D な本を作る
2025年10月12日
2025年10月12日
こんにちは、けいこんぐらです！
今回は、Tailwind CSS を使って、CSS で 3D に動作する本のサンプル紹介と、その実装方法を解説します！
CSS の基本的な知識があれば、簡単に実装できるので、ぜひ挑戦してみてください！💪
今回は、私がよく使っている TailwindCSS を使用していますが、CSS に存在するプロパティがほとんどだと思うので、フレームワークを使っている方も参考になるかと思います！
サンプル紹介
まず、完成サンプルはこちらです！
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time featur
https://play.tailwindcss.com
こんな感じで、薄い黄色の背景の箇所をホバーすると、3D に回転して本が開くアニメーションが実装されていると思います 📖
画面をホバーしたときに本を開くだけのシンプルな実装になっています！🧑💻
実装解説
ここからは、具体的にどのように実装しているかを解説します！
上記に貼り付けてある、Tailwind Play のコードと見比べながら読んでいただけると、より理解が深まるかと思います！
1. 親要素に perspective を設定する
ここでポイントになるのはperspectiveプロパティで、物体に遠近感を与えてくれます！
<div class="group flex w-full justify-center bg-amber-50 p-32 perspective-distant">...</div>| プロパティ | 効果 | 参考 |
|---|---|---|
| perspective | 物体に遠近感を与える | MDN |
| group | 子要素で group-hover とすることで親要素のホバー時に子要素も反応する | Tailwind CSS |
| その他 | スタイルの調整 | - |
2. 本の要素に transform-style を設定する
ここでのポイントはtransform-3dで、子要素を 3D 空間に配置するように設定しています！
<div class="relative aspect-[3/4] h-80 transition duration-700 transform-3d group-hover:-rotate-y-[20deg]">...</div>| プロパティ | 効果 | 参考 |
|---|---|---|
| transform-3d | 子要素を 3D 空間に配置する | MDN |
| transition duration-700 | アニメーションにかかる時間 | - |
| group-hover:-rotate-y-[20deg] | group 要素がホバーされたときに Y 軸を中心に 20 度回転させる 単位が deg なのは注意！ | MDN |
| その他 | スタイルの調整 | - |
3. 本の表紙を作る
表紙だけたくさん回転させて、表紙を開いているように見せたいので、回転の角度を大きく設定しています 📐
<div class="absolute inset-0 origin-left rounded-md bg-[#06B6D4] transition duration-1000 group-hover:-rotate-y-45">
<div class="space-y-4 py-16 text-center text-sm font-semibold text-gray-50">
<p>【Tailwind CSS】</p>
<p>CSSで3Dな本を作る</p>
<svg ... class="mx-auto size-16 fill-gray-50">...</svg>
</div>
</div>| プロパティ | 効果 | 参考 |
|---|---|---|
| absolute inset-0 | 親の relative 要素に対して、目一杯広がる | MDN |
| origin-left | Y 軸の回転の基準点を左端に設定 | MDN |
| group-hover:-rotate-y-45 | Y 軸の回転（本全体の回転の角度より大きく設定してる） | - |
| その他 | スタイルの調整 | - |
4. 本のページを作る
Z 軸にページをずらしていくことで、本のページが重なっているようにして、ほんの厚みを表現しています！
また、1 ページ目だけ、少しテキストを入れてみました！📝
<div class="absolute inset-1 -translate-z-[3px] rounded-md border border-gray-300 bg-gray-50 p-8">
<p class="text-xs">...</p>
</div>
<div class="absolute inset-1 -translate-z-[6px] rounded-md border border-gray-300 bg-gray-50"></div>
<div class="absolute inset-1 -translate-z-[9px] rounded-md border border-gray-300 bg-gray-50"></div>
<div class="absolute inset-1 -translate-z-[12px] rounded-md border border-gray-300 bg-gray-50"></div>
<div class="absolute inset-1 -translate-z-[15px] rounded-md border border-gray-300 bg-gray-50"></div>
<div class="absolute inset-1 -translate-z-[18px] rounded-md border border-gray-300 bg-gray-50"></div>
<div class="absolute inset-1 -translate-z-[21px] rounded-md border border-gray-300 bg-gray-50"></div>
<div class="absolute inset-1 -translate-z-[24px] rounded-md border border-gray-300 bg-gray-50"></div>
<div class="absolute inset-1 -translate-z-[27px] rounded-md border border-gray-300 bg-gray-50"></div>Z 軸について別角度から見たら、どうなっているかわかりやすいと思います！
背表紙がないですが今回の実装では見えない部分なので、作ってません、、💦
| プロパティ | 効果 | 参考 |
|---|---|---|
| absolute inset-1 | 親の relative 要素に対して少し内側に広がる | - |
| -translate-z[...] | 各ページを Z 軸（奥）にずらす | MDN |
| その他 | スタイルの調整 | - |
5. 裏表紙を作る
各ページを作ったときと同じ要領で、裏表紙も作ります！
<div class="absolute inset-0 -translate-z-[30px] rounded-md bg-[#06B6D4]"></div>たったこれだけで、完成です！🎉
まとめ
今回は、Tailwind CSS を使って、CSS で 3D に動作する本のサンプル紹介と、その実装方法を解説しました！🔎
30 行ぐらいのコードで、3D な実装ができるのはすごく以外ですよね！
3 次元の要素がサイト内にあると、すごくリッチな印象になるので、すごくおすすめです！🙆♂️
もし今回の内容が難しければ、コピーして使うなり、以下のドキュメントも参考にしながら、少しずつ自分の好きなようにカスタマイズしてみてください！
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs
https://developer.mozilla.org
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leav
https://tailwindcss.com
前の記事
初心者向け TypeScript 環境構築まとめ。npx/tsc、tsx による実行、ウォッチモードや package.json スクリプトの設定まで実用的に説明します。
