Blog

css3で立体的にくるっと回転させるメニュー

2012.05.09Cat:css3 デザイナー

css3の記事を見て、自分でもやってみようということで、 ちょっと試してみました。

 

参考元は

[CSS]パネル切替時の普通のエフェクトに飽きた人用、立体的にくるっと回転させるスタイルシート | コリス

です。

 

上記サイトから紹介されているデモページを元に

「css3で立体的にくるっと回転させるメニュー」

なるものをマネしてみました。

 

css3なので、firefoxかchromeでご覧下さい。

DEMO

 

立体的に回転させる方法(考え方)としては、上記サイトを見ていただいた方がわかるかと思います。

具体的なソースは下記になります。

 

html

 

css

 

正直な所、transformについてはまだよく理解できていません。

特にtranslateZがわかってないです。。。

 

今コンテンツの高さが60pxで設定してますが、

この値によってtranslateZの数値も変えていかないと上手いこと表現できないようです。

 

cssだけでこんな表現ができるなんてこれからcssを覚える人は大変ですねw  

ただ、実際こういう表現を実践で使うことはまだそうないと思います。

 

ですので、もっと現実的なものを紹介したいと思います。

 

上記でも使用している「transition」で、ホバーをすると時間をかけて変化するものです。

今までなら、javascriptなんかを使わないとできなかったはずです。 cssなら簡単に実装できます。

 

html

 

css

 

 

transitionの設定は、 .menu,.menu:hoverのどちらに設定しても正常に動くようです。

 

これぐらいの設定であれば、IEで見たとしても、

通常通り、マウスオンで変化しますので、問題ないかと思います。

いわゆるプログレッシブ・エンハンスメントってやつですね。

その考え方が受け入れられれば良いですが、一般の方からすると、ブラウザってなに?っていう人も多いので理解されるのは難しいかもしれません。

 

それにしても、css3すごいですね!

考え方次第でいろんな表現が出来そうです。

 

最後にcss3の参考にしたサイトを紹介します。

CSS3リファレンス

タグの紹介と実際の例が載っているので便利です。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ