いわゆるハンバーガーメニューアイコン(こんなの : )のみを表示して、クリックすると左端からオフキャンバスナビゲーション(グローバルメニュー)がスライド表示すると共に、メインコンテンツエリアは3Dアニメーションで斜め奥に移動するエフェクトのサンプルをご紹介します。 Javascriptは使用せず、CSSのみで表現しています。 概要としては、label要素であるハンバーガーメニューアイコンをクリックすると、関連付けられているチェックボックスの属性を持たせた input要素のチェック状態が変化し、これをCSSの疑似セレクタ(:checked)を利用してチェックされた状態のときに、オフキャンバス状態にしてあるサイドメニューをCSSのtransition, transformプロパティによってスライド表示させる、というものです。 言葉ではわかりにくいので、まずは完成サンプルをご覧ください。 See
![CSSのみでグローバルメニューを3Dアニメーションで開閉表示するサンプル](https://cdn-ak-scissors.b.st-hatena.com/image/square/85582eb6133cfd891dc600830ff338ab0341358b/height=288;version=1;width=512/https%3A%2F%2Fdigipress.info%2F_wp%2Fwp-content%2Fuploads%2F2016%2F11%2F157838.jpg)