【css】tranformプロパティの使い方

cssのtransformプロパティの使い方について

サマリ

  • アニメーションを定義する際に使う
  • 物体の移動位置・回転・拡大・縮小を定義できる
  • 複数の関数を組み合わせて使うことができる
.rect {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: orangered;
  -webkit-transform: translateX(50px) scaleY(2);
          transform: translateX(50px) scaleY(2);
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

tranformの定義内容

関数 定義内容 記述例 補足
translate X・Y軸の位置指定 translateX(50px, 50px) pxは%も可能
translateX X軸方向の位置指定 translateX(50px) X軸方向に50px移動
translateY Y軸方向の位置指定 translateY(100%) Y軸方向に物体一つ分(100%)移動
rotate 回転の角度を指定 rotate(30deg) 30度の回転
skew 平行四辺形を定義 skew(30deg) 30度物体が変形した形で表示される
scale 物体の拡大・縮小を定義 scale(2, 1.1) X軸方向に2倍、Y軸方向に1.1倍の変化