みなさんこんにちは！おさかなです！
今回は「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ブックで遊んじゃおう〜！
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
