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