CSS Transform

Transformとはあらかじめ設定された要素を変形させることが可能です。

注意すべきことはベンダープレフィックスが必要であるということです。

記述する際にはIE9、androidのブラウザに対応させるため,
ベンダープレフィックスの記述する必要があります。

  -webkit-transform : rotate(10deg) ;
  -ms-transform : rotate(10deg) ;
  transform : rotate(10deg) ;

-webkit-transform : rotate(10deg) ;

-ms-transform : rotate(10deg) ;

transform : rotate(10deg) ;

X軸側への横軸の移動/Y軸側への横軸の移動/Z軸…奥行きの移動

transform: translateX(50px);

1	transform: translateX(50px);

transform: translateY(50px);

1	transform: translateY(50px);

transform: translateZ(50px);

1	transform: translateZ(50px);

上記の記述だけでなくショートハンドラで省略して記述が可能です。
X軸とY軸側への移動

transform: translate(50px, 50px);

1	transform: translate(50px, 50px);

X軸とY軸とZ軸側への移動

transform: translate3d(50px, 50px, 50px);

1	transform: translate3d(50px, 50px, 50px);

.on()のイベントの定義

pcとsp時での条件分岐