【transform】ボックスの変形

transformプロパティでボックスを変形させる

transformプロパティを使用すると、ボックスの回転・拡大縮小・移動などを設定することができます。

値は関数形式で、半角スペース区切りで複数指定できます。

値は指定した順番で実行されるので、指定する順番によっては結果が変わることもあります。

角度の指定方法

まずは、角度の指定方法をまとめておきます。

角度の指定方法には、下記のようなものがあります。

deg

円周の1/360を１として扱う単位(度)

grad

円周の1/400を1として扱う単位

rad

ラジアン

turn

円周の1/1を1として扱う単位

transformプロパティの設定方法

transformプロパティの値には、下記の値が指定できます。

none

回転・拡大縮小・移動などを行いません。

noneがtransformプロパティの初期値です。

rotate

rotateは、時計回りに回転させる角度を指定します。

<div style="transform: rotate(30deg); background-color: skyblue; width: 50px; height: 50px;"></div>

scale

scaleは横、縦の順番で、拡大・縮小させる倍率を数値(単位なし)で指定します。

値を1つだけ指定すると、縦、横両方の指定になります。

<div style="transform: scale(0.8); background-color: skyblue; width: 50px; height: 50px;"></div>

scaleX

scaleXは、横方向に拡大・縮小させる倍率を数値(単位なし)で指定します。

<div style="transform: scaleX(0.5); background-color: skyblue; width: 50px; height: 50px;"></div>

scaleY

scaleYは、縦方向に拡大・縮小させる倍率を数値(単位なし)で指定します。

<div style="transform: scaleY(0.5); background-color: skyblue; width: 50px; height: 50px;"></div>

translate

translateは、移動させる距離を右方向、下方向の順に指定します。

値が1つの時は、右方向の指定として扱われます。

<div style="transform: translate(10px, 20px); background-color: skyblue; width: 50px; height: 50px;"></div>

translateX

translateXは、右方向に移動させる距離を指定します。

<div style="transform: translateX(20px); background-color: skyblue; width: 50px; height: 50px;"></div>

translateY

translateYは、下方向に移動させる距離を指定します。

<div style="transform: translateY(20px); background-color: skyblue; width: 50px; height: 50px;"></div>

skew

skewは、傾斜させる角度を、x軸から傾斜させる角度、y軸から傾斜させる角度の順に数値で指定します。

値が1つの時は、x軸から傾斜させる角度の指定として扱われます。

<div style="transform: skew(30deg, 30deg); background-color: skyblue; width: 50px; height: 50px;"></div>

skewX

skewXは、x軸から傾斜させる角度を数値で指定します。

<div style="transform: skewX(30deg); background-color: skyblue; width: 50px; height: 50px;"></div>

skewY

skewYは、y軸から傾斜させる角度を数値で指定します。

<div style="transform: skewY(30deg); background-color: skyblue; width: 50px; height: 50px;"></div>

matrix

matrixは、6つの値で2次元の変形をします。

1. 横方向の拡大縮小
2. y軸から傾斜させる角度
3. x軸から傾斜させる角度
4. 縦方向の拡大縮小
5. 右方向に移動させる距離
6. 下方向に移動させる距離

<div style="transform: matrix(2,0,0.5,1,10,20); background-color: skyblue; width: 50px; height: 50px;"></div>

ボックスの変形のまとめ

今回は、ボックスの変形についてまとめました。

transformプロパティは、CSSでのアニメーションにも使います。

しっかりと理解することで、面白いアニメーションを作ることができるようになるかもしれません。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。