css3で立体的にくるっと回転させるメニュー
css3の記事を見て、自分でもやってみようということで、 ちょっと試してみました。
参考元は
[CSS]パネル切替時の普通のエフェクトに飽きた人用、立体的にくるっと回転させるスタイルシート | コリス
です。
上記サイトから紹介されているデモページを元に
「css3で立体的にくるっと回転させるメニュー」
なるものをマネしてみました。
css3なので、firefoxかchromeでご覧下さい。
立体的に回転させる方法（考え方）としては、上記サイトを見ていただいた方がわかるかと思います。
具体的なソースは下記になります。
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <ul> <li> <div class="item"> <div class="normal">company</div> <div class="hover">会社の紹介をいたします。</div> </div> </li> <li> <div class="item"> <div class="normal">service</div> <div class="hover">弊社サービスをご紹介いたします。</div> </div> </li> <li> <div class="item"> <div class="normal">access</div> <div class="hover">弊社までの道のりをご紹介いたします。</div> </div> </li> </ul> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | #main_ts ul li { -webkit-perspective: 4000px; -moz-perspective: 4000px; -ms-perspective: 4000px; -o-perspective: 4000px; perspective: 4000px; position: relative; width: 200px; height: 60px; display: inline-block; margin: 10px 30px 20px 10px; vertical-align: top; cursor: pointer; } #main_ts ul li .item { height: 60px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform .6s; /* 0.6秒の省略した書き方です。 */ -moz-transition: -moz-transform .6s; -ms-transition: -ms-transform .6s; -o-transition: -o-transform .6s; transition: transform .6s; } #main_ts ul li .item:hover { -webkit-transform: translateZ(-25px) rotateX(90deg); -moz-transform: translateZ(-25px) rotateX(90deg); -ms-transform: translateZ(-25px) rotateX(90deg); -o-transform: translateZ(-25px) rotateX(90deg); transform: translateZ(-25px) rotateX(90deg); } #main_ts ul li .item:hover .hover { box-shadow: 0px 3px 5px #999999; } #main_ts ul li .item:hover .normal { box-shadow: none; } #main_ts ul li .normal { position: absolute; top: 0; width: 200px; height: 45px; text-align: center; padding: 15px 0 0 0; -webkit-transform: translateZ(25px); -moz-transform: translateZ(25px); -ms-transform: translateZ(25px); -o-transform: translateZ(25px); transform: translateZ(25px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; background-color: #dddddd; box-shadow: 0px 3px 5px #999999; background: -moz-linear-gradient(top, #eeeeee 0%, #d2d2d2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#d2d2d2)); background: -webkit-linear-gradient(top, #eeeeee 0%,#d2d2d2 100%); text-shadow: 1px 1px 0px #ffffff; font-size: 18px; } #main_ts ul li .hover { position: absolute; top: 0; width: 180px; height: 40px; padding: 10px; -webkit-transform: rotateX(-90deg) translateZ(25px); -moz-transform: rotateX(-90deg) translateZ(25px); -ms-transform: rotateX(-90deg) translateZ(25px); -o-transform: rotateX(-90deg) translateZ(25px); transform: rotateX(-90deg) translateZ(25px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; background-color: #d2d2d2; box-shadow: none; background: -moz-linear-gradient(top, #d2d2d2 0%, #aaaaaa 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#d2d2d2)); background: -webkit-linear-gradient(top, #eeeeee 0%,#d2d2d2 100%); } |
正直な所、transformについてはまだよく理解できていません。
特にtranslateZがわかってないです。。。
今コンテンツの高さが60pxで設定してますが、
この値によってtranslateZの数値も変えていかないと上手いこと表現できないようです。
cssだけでこんな表現ができるなんてこれからcssを覚える人は大変ですねw
ただ、実際こういう表現を実践で使うことはまだそうないと思います。
ですので、もっと現実的なものを紹介したいと思います。
上記でも使用している「transition」で、ホバーをすると時間をかけて変化するものです。
今までなら、javascriptなんかを使わないとできなかったはずです。 cssなら簡単に実装できます。
html
|
1 | <a class="menu" href="#">menu1</a> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #main_ts .menu { background: #ffffff; border: 1px solid #eeeeee; padding: 5px 10px; text-align: center; display: block; width: 100px; color: #000000; text-decoration: none; /* 動きとしては下のtransitionを設定するだけです。 */ -webkit-transition: all .8s; /* 0.8秒で変化 */ -moz-transition: all .8s; -ms-transition: all .8s; -o-transition: all .8s; transition: all .8s; } #main_ts .menu:hover { background: #F60; color: #FFF; } |
transitionの設定は、 .menu,.menu:hoverのどちらに設定しても正常に動くようです。
これぐらいの設定であれば、IEで見たとしても、
通常通り、マウスオンで変化しますので、問題ないかと思います。
いわゆるプログレッシブ・エンハンスメントってやつですね。
その考え方が受け入れられれば良いですが、一般の方からすると、ブラウザってなに？っていう人も多いので理解されるのは難しいかもしれません。
それにしても、css3すごいですね！
考え方次第でいろんな表現が出来そうです。
最後にcss3の参考にしたサイトを紹介します。
タグの紹介と実際の例が載っているので便利です。
Author Profile
スターフィールド編集部
SHARE
