3D画像処理スタイリングしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、3D画像のスタイリングをCSSで実装します。3Dといいつつ、2D画像をCSSを使って3Dっぽく見せる感じです。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript記事

HTML & JavaScript

スタイリング

CSSでスタイリングをしていきます。項目に出てくるbodyやmagicは、CSSの要素です。

全体の設定

bodyの設定

magicの設定

boxesの設定

boxの設定

box::beforeの設定

box::afterの設定

boxes.big .boxの設定

これで、完成です。

おわりに

CSSとJavaScriptを組み合わせると、アイデア次第で色々なアプリケーションが実装できます。

仕事ではあまりデザイン性を求められることはありませんが、そういったことを意識して仕事をすれば、より多くの経験を詰めると思っているので、日々勉強です^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す