CSS

transformプロパティを使ってみよう

要素を変形させるためのtransformプロパティについて

  • 移動
  • 回転
  • リサイズ
  • 複数の変形

移動

・変形させるための transform プロパティもよく使われます。このプロパティではいくつかやれることはありますがよく使われるのは移動、回転、リサイズがあります。

・まずは移動からみていきます。移動に translate という値を使うのですが、 translateX で左右方向、 transalteY で上下方向、そして transalte で上下左右方向の移動量を一緒に指定することができます。

回転

・次に回転ですが rotate を使います。角度を与えてあげれば、 30 度や60 度のように指定して回転させることができます。

・transform: rotate(30deg);というふうに命令することが出来ます。

リサイズ

・次にリサイズです。scaleX で左右方向のリサイズ、 scaleY で上下方向のリサイズ、 scale で上下左右方向のリサイズを一気に指定することができます。

複数の変形

・更に複数の変形を同時に指定することもできますが、順番に注意が必要です。

・例えば transalteX の後に rotate とすると、右方向に 100px 行ってから 30 度回転するので、横方向にアニメーションすることになります。

・しかしrotate(30deg) 、transalteX(100px) とすると 30 度回転した後に、座標軸が回転したまま右方向に 100px 移動するので、先ほどと違って、右下に30度ずれてアニメーションすることになるので注意しましょう。

-広告-

 

 






-CSS