みなさんこんにちは!おさかなです!
今回は「3D Book Image CSS Generator」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・3Dブックを作成したい方
・表紙画像を本にしたときのイメージを掴みたい方
・3Dモデルで遊びたい方
本にした時のイメージが見たい!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
表紙作ったんだけど、これ本にしたらどんな感じになるのかな…?
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
それなら「3D Book Image CSS Generator」で確認できるよ!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
え!そうなの〜!
![](https://osakanav.com/wp-content/uploads/2021/11/ouigo-top-160x90.png)
「3D Book Image CSS Generator」って何?
「3D Book Image CSS Generator」とは、(@scastiel)さんが開発した、本や雑誌の3Dアニメーションを作成することができるサービスのことです!(面白い!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/d61d5fb83869b682bfd44d4e15a96e97.png)
![](https://osakanav.com/wp-content/uploads/2021/10/3droom-size-160x90.gif)
実際につかってみよう!
作れるものをチェック!
それでは早速サイトにアクセスします!
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook.png)
少しページをスクロールすると…?
こんな感じで、3Dアニメーションの見本を見ることができます!(すごいキレイ!)
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook.gif)
左側のウィンドウにある「Choose my cover…」をクリックすると、本の表紙にしたい画像を選択することができます。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-choose-btn.png)
こんな感じで、おさかなブックが簡単にできました!(すごい可愛い!)
画像サイズに合わせて、本の大きさも自動で変更してくれるみたいですね。
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-osakana.png)
アカウントを作成しよう!
無料のアカウントを作成すると「本の厚さ」の編集や「ブログに貼り付ける」ことが出来るみたいなので、早速作成してみます!(おー!)
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-login.png)
まずはこちらのサインアップ画面を開きましょう!
![](https://osakanav.com/wp-content/uploads/2021/11/3d-sighn-up.png)
「メールアドレス」「パスワード」を決めたら「Continue」ボタンを押します!(ポチッと)
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-continue.png)
3Dブックを作ろう!
アカウントの作成が完了すると「My book covers」というページが開きます!(おお!)
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-my.png)
「Create a new book」ボタンを押して、新しい本を作成してみましょう!(よいしょ!)
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-create.png)
すると、このような設定画面が開きました!
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-setting.png)
タイトルやリンクなども設定できますが、とりあず「Book cover image」>「Choose…」から、表紙画像を選択しましょう!
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-choosebtn.png)
(いい感じです🌼)
![](https://osakanav.com/wp-content/uploads/2021/11/make-3dbook.png)
次に「Customize 3D setteings」を押して、本のカスタマイズを行っていきましょう!
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-custom.png)
こちらのバーを動かしたり、16進数のカラーコードを使用したりすると、本をカスタマイズすることができます!
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-setting-bar.png)
・Rotate … 回転
・Rotate(hover) … マウスカーソルを乗せたときの回転
・Perspective … 視点
・Anim.duration …アニメーションの所要時間
・Radius … 半径
・Thickness … 厚さ
・Width … 幅
・Height … 高さ
・Pages offset … ページオフセット
・Background color … 背景色
・Shadow color … 影の色
カスタマイズが完了したら「Save」ボタンを押して、保存していおきましょう!
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-save.png)
ちなみに「Embed your book cover」のところにあるコードを、サイト内に埋め込むと、サイト上に「3Dブック」を表示させることができるので、興味のある方はぜひ試してみてください〜✨
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-code.png)
↓実際に作成したものがこちら
(マウスカーソルを乗せてみると…?)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
3Dブックで遊んじゃおう〜!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/10/3dcons-top-160x90.png)