CSS Transform

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

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

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

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

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

transform: translateX(50px);
transform: translateY(50px);
transform: translateZ(50px);

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

transform: translate(50px, 50px);

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

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

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です