leaning hamburger menu(drawer)

gistfile1.md

概要

ボックスを「 -横幅」ぶん外に出しておいて、cssアニメーションで入れる

css3 transition を使う

transition には、何が変化するかを記述(秒、形、変形)

.move{
	transition:transform 3s;
	-webkit-transition:-webkit-transform 3s;
}

transform に、何がどのように変形するかを書く（回転、移動etc）

移動=translate

translate, scale, rotate, perspecive..

transform: translate3d(350px,0,0)
/* x,y,z 指定*/
/* 通常なら translate(350px,0) でいいはずだけど…… */

実際の drawer のコードでやること

• 元の要素に transition: transform を指定しておく
• クリックしたとき付けるクラスに、移動先を指定