おはモニ。
どうもひめたそん@himetasonです。
オリジナルテーマを誠心誠意製作中です。
楽に3次元の表現をできるコードと実際に使用した自作テーマ
プログラミングにおいて３Dを扱うのが一番苦手です。
理由は非常に細かくめんどくさいからですね。
しかしCSSで３Dを表現するのは非常に簡単でした。
今回はそんな話と実際にデザインしてみたテーマの紹介です。
みなさんも気軽に３Dデザインをしてみましょう。
３D表現に使用するコードの紹介です
要素を３Dにするのに使う主なコードの紹介です。
[codebox title="CSS"]要素 {
position: relative;
transform: perspective(1000px);
transform-origin: -50% -50% 50px;
transform-style: preserve-3d;
}大体こんなもんですかね。
perspectiveで奥行きを設定。
originで初期ポジションを設定。
styleで３d表現を指定。
要素１つを３６０度動かすならばこれだけでいけます。
立方体などの立体物を作るならば親要素の中に子要素で部品を作ります。
[codebox title="CSS"]子要素 {
transform: rotateY(0deg) translate3d(０px, 0px, ０px);
}こちらで角度や位置を造形するだけです。
感覚でできちゃうので超簡単です。
動きに関しては以前紹介したアニメーションの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での３Dデザインは感覚で楽しめるので是非実践してみてくださいね。
実際の使用例を紹介します
では３D表現を用いて僕が製作したWordPressテーマを紹介します。
[sanko href="http://himediary.starfree.jp/" title="３D表現デモ" site="HimeDiary"]こちらは僕が冗談で製作している配布予定のないテーマです。
トップページも記事ページも立体表現を活用しています。
ユーザビリティについては置いておいて、こんな表現ができるという参考にしてみてください。
CSSのみでここまで出来るのは驚きですし楽です。
デザインの幅が広がりますね。
ナビメニューのアニメーションなど、小さい部分に使うとオリジナリティの演出に良いです。
しかし多用は重くなるので気をつけてくださいね。
あとがき
ということで３次元表現と実例でした。
上手く使えば非常に個性のあるデザインが表現できますね。
また、国外の方がCSSでFPSゲームを作ったという例があります。
半端ないですよね。
相当の時間を要しそうですがこんなこともできてしまうんです。
操作の多様化にはJavaScriptの兼用が必要ですが、装飾としてはCSSのみでオッケーです。
アクセントとして採用してみてはどうでしょうか。
独学でWEBプログラミング学習する際にオススメの本とサイト紹介しています。
それでは良いCSSライフを。
ではまた。
