【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倍の変化