UNORTHODOX WORKBOOK

BLOG TOPWeb Design[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー

[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー

catch-web-design

このサイトでも使用している(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のみで実装しています。デモは以下のリンクからどうぞ。

DEMO

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;
}

transformperspectiverotateY の組み合わせで「パタッ」となるように表現しています。それぞれの数値を変更することで、角度や奥行き感を変更することができます。

Firefoxでアニメーションが効かなくなるため、transition は、ショートハンドではなく個別に指定しています。

間接セレクタ(~)を使用して、かなり強引な感じですが、一応、Chrome、Firefox、Safari(それぞれ最新版)、IE11で、期待通りに動いていました(Firefoxがやや不安定だけど)。

追記:Firefoxでアニメーションがやや不安定だったのは、transition-delay の値を「0」としていた為で、「0s」とすることで改善しました。上記のコードは修正しました。

おわり

スマホでもボタン部分をタッチすれば同じような動きになるので、閉じる時がややめんどくさいけど、結構使えるかもと思った次第です。

CSSだけでとても軽量なので良かったらどうぞ。

ABOUT

it's me

長野県北部を拠点にフリーランスとして活動しています。
Webサイトの制作をメインに、グラフィックデザインなどの制作を承っています。Twittermore

PAGE TOP