3D Book Image CSS Generator - CSSで3D風に書籍を表示
コンピュータ上では2Dが基本です。そのため、3Dのコンテンツがあるとそれだけで見た目にインパクトがあります。それは分かっていつつも作成するのが大変なのが3Dコンテンツです。ちょっとした素材のために3Dソフトウェアで作成というのは面倒です。 そこで擬似的な3D表示にチャレンジしてみましょう。今回はCSSを使った3D表現を行う3D Book Image CSS Generatorを紹介します。
3D Book Image CSS Generatorの使い方
右側にプレビューが表示されています。3Dっぽいですよね。
画像は自由に変更できます。
マウスオーバーで向きが変わります。
3D Book Image CSS GeneratorはCSSで斜めのコンテンツを追加しており、擬似的に3Dっぽい表示を行っています。厚さや角の丸みなどは自由にカスタマイズできます。最終的に生成されたCSSとHTMLを使えば、自分のサイトに3D表示された書籍を表示できます。
3D Book Image CSS GeneratorはTypeScript/CSS製のオープンソース・ソフトウェア(MIT License)です。
3D Book — Give some perspective to your book cover scastiel/3d-book-image-css-generator: Generate a 3D image from a book cover and export to HTML/CSS to embed on your website.