オリジナルWordPressテーマ及びメディアサイトの公開準備中です

CSSで3Dを利用したデザインをする。奥行きは表現の幅を3倍にします【プログラミング】

おはモニ。
どうもひめたそん@himetasonです。
オリジナルテーマを誠心誠意製作中です。

楽に3次元の表現をできるコードと実際に使用した自作テーマ

プログラミングにおいて3Dを扱うのが一番苦手です。
理由は非常に細かくめんどくさいからですね。

しかしCSSで3Dを表現するのは非常に簡単でした。
今回はそんな話と実際にデザインしてみたテーマの紹介です。

みなさんも気軽に3Dデザインをしてみましょう。

3D表現に使用するコードの紹介です

要素を3Dにするのに使う主なコードの紹介です。

CSS
要素 {
position: relative;
transform: perspective(1000px);
transform-origin: -50% -50% 50px;
transform-style: preserve-3d;
}

大体こんなもんですかね。

perspectiveで奥行きを設定。
originで初期ポジションを設定。
styleで3d表現を指定。

要素1つを360度動かすならばこれだけでいけます。

立方体などの立体物を作るならば親要素の中に子要素で部品を作ります。

CSS
子要素 {
transform: rotateY(0deg) translate3d(0px, 0px, 0px);
}

こちらで角度や位置を造形するだけです。
感覚でできちゃうので超簡単です。

動きに関しては以前紹介したアニメーションのCSS。

CSSで手軽に要素を動かす。コピペで動きのあるサイトデザインを実現【プログラミング】

こちらを動かしたい要素に使うことができます。
またマウスオーバーなどで動かしたい場合は、

CSS
要素 {
-webkit-transition:all .6s;
position: relative;
transform-origin: 50% 50% -50px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg) rotateX(0deg);
}
要素:hover {
-webkit-transform: rotateY(10deg) rotateX(10deg);
}

このようにhoverとwebkitを利用しましょう。
border-radiusなども使用できるのでいろんなデザインができますよ。
また透過PNG(※ブラウザ制限あり)を利用し円表現やオブジェクトの作成もできます。

CSSでの3Dデザインは感覚で楽しめるので是非実践してみてくださいね。

実際の使用例を紹介します

では3D表現を用いて僕が製作したWordPressテーマを紹介します。

参考 3D表現デモHimeDiary

こちらは僕が冗談で製作している配布予定のないテーマです。
トップページも記事ページも立体表現を活用しています。

ユーザビリティについては置いておいて、こんな表現ができるという参考にしてみてください。
CSSのみでここまで出来るのは驚きですし楽です。
デザインの幅が広がりますね。

ナビメニューのアニメーションなど、小さい部分に使うとオリジナリティの演出に良いです。
しかし多用は重くなるので気をつけてくださいね。

あとがき

ということで3次元表現と実例でした。
上手く使えば非常に個性のあるデザインが表現できますね。
また、国外の方がCSSでFPSゲームを作ったという例があります。

参考 CSS FPSkeithclark

半端ないですよね。
相当の時間を要しそうですがこんなこともできてしまうんです。

操作の多様化にはJavaScriptの兼用が必要ですが、装飾としてはCSSのみでオッケーです。
アクセントとして採用してみてはどうでしょうか。

独学でWEBプログラミング学習する際にオススメの本とサイト紹介しています。
独学でWEBプログラミングを始める為におすすめの本、サイト【自宅で手軽に始められます】

それでは良いCSSライフを。

ではまた。