みなさんこんにちは!おさかなです!
今回は「3D Book Image CSS Generator」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・3Dブックを作成したい方
・表紙画像を本にしたときのイメージを掴みたい方
・3Dモデルで遊びたい方
本にした時のイメージが見たい!

表紙作ったんだけど、これ本にしたらどんな感じになるのかな…?

それなら「3D Book Image CSS Generator」で確認できるよ!

え!そうなの〜!

「3D Book Image CSS Generator」って何?
「3D Book Image CSS Generator」とは、(@scastiel)さんが開発した、本や雑誌の3Dアニメーションを作成することができるサービスのことです!(面白い!)


実際につかってみよう!
作れるものをチェック!
それでは早速サイトにアクセスします!

少しページをスクロールすると…?
こんな感じで、3Dアニメーションの見本を見ることができます!(すごいキレイ!)

左側のウィンドウにある「Choose my cover…」をクリックすると、本の表紙にしたい画像を選択することができます。(ふむふむ…。)

こんな感じで、おさかなブックが簡単にできました!(すごい可愛い!)
画像サイズに合わせて、本の大きさも自動で変更してくれるみたいですね。

アカウントを作成しよう!
無料のアカウントを作成すると「本の厚さ」の編集や「ブログに貼り付ける」ことが出来るみたいなので、早速作成してみます!(おー!)

まずはこちらのサインアップ画面を開きましょう!

「メールアドレス」「パスワード」を決めたら「Continue」ボタンを押します!(ポチッと)

3Dブックを作ろう!
アカウントの作成が完了すると「My book covers」というページが開きます!(おお!)

「Create a new book」ボタンを押して、新しい本を作成してみましょう!(よいしょ!)

すると、このような設定画面が開きました!

タイトルやリンクなども設定できますが、とりあず「Book cover image」>「Choose…」から、表紙画像を選択しましょう!

(いい感じです🌼)

次に「Customize 3D setteings」を押して、本のカスタマイズを行っていきましょう!

こちらのバーを動かしたり、16進数のカラーコードを使用したりすると、本をカスタマイズすることができます!

・Rotate … 回転
・Rotate(hover) … マウスカーソルを乗せたときの回転
・Perspective … 視点
・Anim.duration …アニメーションの所要時間
・Radius … 半径
・Thickness … 厚さ
・Width … 幅
・Height … 高さ
・Pages offset … ページオフセット
・Background color … 背景色
・Shadow color … 影の色
カスタマイズが完了したら「Save」ボタンを押して、保存していおきましょう!

ちなみに「Embed your book cover」のところにあるコードを、サイト内に埋め込むと、サイト上に「3Dブック」を表示させることができるので、興味のある方はぜひ試してみてください〜✨

↓実際に作成したものがこちら
(マウスカーソルを乗せてみると…?)

3Dブックで遊んじゃおう〜!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
