ITエンジニア/デザイナ向けにオープンソースを毎日紹介

コンピュータ上では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.

 

MOONGIFTの関連記事

  • DevRel
  • Com2