on:2013年11月7日sponsors最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。Menuデモ実装デモデモは水平タイプ・垂直タイプの2種類あります。水平タイプでサイドバーを表示するデモから。デモページ:水平タイプ左の四本線をクリック・タップすると、アニメーションでサイドバーが表示されます。このコンテンツがパースペクティブでぐぐぐっと傾くの、かっこいいですよね。垂直タイプで、ヘッダを表示するデモもあります。デモページ:垂直タイプ上の四本線をクリック・タップすると、アニメーションでヘッダが表示されます。HTMLパースペクティブで表示するコンテンツをdivなどのラッパーを使って配置します。CSSまずは、ラッパーにパースペクティブのエフェクトを与えます。ここで紹介するのは水平タイプのスタイルのみです。垂直タイプはダウンロードファイルを参考にしてください。}続いて、メニューをスタイルします。ポイントは、メニューをz-indexでコントロールすることです。JavaScriptスクリプトは単にコンテナにパースペクティブのclassを加えるだけです。jquery.jsを外部ファイルとし、下記のスクリプトを記述します。