[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー
このサイトでも使用している(2015年1月現在)パタッと開いてパタッと現れるサイドメニューを実装する際に、CSSの transform:perspective を使用したんですが、少しはまった点があったので、復習を兼ねて実装方法をブログに残しておこうと思います。
このサイトでは、クリック(jQuery)でサイドメニューが展開されますが、ここではマウスホバーでサイドメニューが展開する方法を記載しています。
transform:perspective
CSSの transform:perspective は、3D変形の遠近効果を調節する際に使用するプロパティで、奥行のある表現を可能にします。
これとは別に、transform が付かない perspective というプロパティもありますが(効果は同じ)、ここでは指定した要素自身に効果を与えることができる transform:perspective を使用しています。
transform:perspective は、ピクセルで指定し、数値は低ければ低いほど遠近感が強くなり、逆に数値が大きいと遠近感は緩やかになります。
クロスブラウザに注意
はまったのは、数値を指定する際の単位の有無で、Webkit系や標準の仕様では単位(px)の記載は不要なのですが、FirefoxやIE(10以降)では、単位の記載が必須なようで、ないとうまく表示されませんでした。
Webkit系では、単位はあってもなくてもどちらでもいいようなので、perspective プロパティを使用する際は(今のところ)、単位(px)の記載ありに統一したほうが良さそうです。
実装方法
JSは一切使用していません。CSSのみで実装しています。デモは以下のリンクからどうぞ。
HTML
※必要な部分のみ記載しています。
<body>
<div class="hamburger-btn">
<!-- ここにボタンのスタイル -->
</div>
<nav class="side-menu">
<!-- ここにサイドメニューのリストとか -->
</nav>
<div class="wrapper">
<!-- ここにメインのコンテンツ -->
</div>
</body>この並びが重要で、.wrapperの上にサイドメニューのコード(.side-menu)があって、その上にボタンのコード(.hamburger-btn)がくるようにしておきます。
他にもやり方はあると思いますが、JSを使わずマウスホバー(CSSのみ)で強引にやってみた結果、この形となりました。
CSS
※必要な部分のみ記載しています。
.wrapper {
width: 100%;
height: 100%;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
}
.side-menu {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100%;
-webkit-transition: all;
transition: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: perspective(500px) rotateY(-90deg);
transform: perspective(500px) rotateY(-90deg);
opacity: 0;
}
.hamburger-btn {
position: fixed;
top: 20px;
right: 20px;
display: block;
width: 40px;
cursor: pointer;
z-index: 1;
}
.hamburger-btn:hover ~ .wrapper,
.side-menu:hover ~ .wrapper {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: perspective(500px) rotateY(5deg);
transform: perspective(500px) rotateY(5deg);
}
.hamburger-btn:hover ~ .side-menu,
.side-menu:hover {
-webkit-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
z-index: 2;
} transform の perspective と rotateY の組み合わせで「パタッ」となるように表現しています。それぞれの数値を変更することで、角度や奥行き感を変更することができます。
Firefoxでアニメーションが効かなくなるため、transition は、ショートハンドではなく個別に指定しています。
間接セレクタ(~)を使用して、かなり強引な感じですが、一応、Chrome、Firefox、Safari(それぞれ最新版)、IE11で、期待通りに動いていました(Firefoxがやや不安定だけど)。
追記：Firefoxでアニメーションがやや不安定だったのは、transition-delay の値を「0」としていた為で、「0s」とすることで改善しました。上記のコードは修正しました。
おわり
スマホでもボタン部分をタッチすれば同じような動きになるので、閉じる時がややめんどくさいけど、結構使えるかもと思った次第です。
CSSだけでとても軽量なので良かったらどうぞ。
