【CSS】transformによる要素変換

transform とは

transformは、要素の回転、伸縮、移動、傾斜を指定するためのプロパティです。

通常は平面なので 2 次元（X 軸, Y 軸）として考えるのですが、3 次元（X 軸、Y 軸、Z 軸）を表現することもできます。 このことについては、各操作とともに説明していきます。

回転（rotate）

要素を回転させるには、rotateを使用します。45 度右回転（時計回り）するには以下のようにします。

.rotate {
  transform: rotate(45deg);
}

指定できる単位は、degといった角度の他にturnが使用できます。 1turnを一周として考えるため、45 度右回転は0.25turnになります。

3 次元とする場合は、rotate3dを使用します。引数に X 軸、Y 軸、Z 軸での回転方向を指定します。

.rotate3d {
  transform: rotate(45deg, 45deg, 45deg);
}

それぞれを軸とする回転については、以下のプレビューでイメージしてください。

それぞれの軸の回転は、rotateX、rotateY、rotateZと個別で指定することもできます。

.rotateX {
  transform: rotateX(45deg);
}
.rotateY {
  transform: rotateY(45deg);
}
.rotateZ {
  transform: rotateZ(45deg);
}

伸縮（scale）

要素の伸縮は、scaleを使用します。 引数として伸縮倍率を指定し、1 つの場合は X、Y 軸方向共に、2 つの場合は X、Y 軸方向それぞれの指定になります。

.scale1 {
  transform: scale(1.5);
}
.scale2 {
  transform: scale(1.5, 0.5)
}

Z 軸を含める場合は、scale3dを使用します。引数の 3 つ目が Z 軸の伸縮倍率になります。

.scale3d {
  transform: scale(0.5, 0.5, 0.5);
}

またそれぞれの軸方向に対して、scaleX、scaleY、scaleZで個別に伸縮率を指定することもできます。

.scaleX {
  transform: scaleX(0.5);
}
.scaleY {
  transform: scaleY(0.5);
}
.scaleZ {
  transform: scaleZ(0.5);
}

移動（translate）

要素の移動にはtranslateを使用します。引数に X 軸方向と Y 軸方向の移動距離を指定します。 引数が 1 つのみの場合は、X 軸方向のみの指定になります。

.translate {
  transform: translate(60px, 30px);
}

Z 軸方向の移動を指定する場合は、translate3dを使用します。 引数の 3 つ目が Z 軸方向の移動指定になります。

.translate3d {
  transform: translate3d(60px, 30px, 50px);
}

各軸の移動指定は、translateX、translateY、translateZを使って個別でできます。

.translateX {
  transform: translateX(60px);
}
.translateY {
  transform: translateX(30px);
}
.translateZ {
  transform: translateX(50px);
}

傾斜（skew）

skewは要素を斜めに傾けます。

引数に X 軸と Y 軸の傾け角度を指定します。skewX、skewYで個別で指定ができます。

わかりずらいと思うのでプレビューで確認してみてください。

.skewX {
  translate: skewX(20deg);
}
.skewY {
  translate: skewY(20deg);
}
.skew {
  translate: skew(20deg, 20deg);
}

一括指定

これまで説明した 4 つのプロパティ値は、以下のように一括で指定することができます。

.transform {
  transform: rotate(45deg) translate(30px, 15px) scale(0.75) skew(20deg, 20deg);
}

原点の変更（transform-origin）

原点（(x, y, z) = (0, 0, 0)の点）は通常要素の中心に設定されます。 このことは回転のアニメーションをみていただければおわかりいただけると思います。

この原点の位置を変更するにはtransform-originを使用します。

プロパティには、デフォルトの原点からどれだけ移動させるかを X 座標、Y 座標、Z 座標の順に指定します。

.origin {
  transform-origin: 30px 40px 50px;
}

また X 座標、Y 座標にはそれぞれtop、center、bottomとleft、center、right を指定できます。 これは要素の端を表します。

.top {
  transform-origin: top;
}
.left {
  transform-origin: center left;
}
.bottom-right {
  transform-origin: bottom right;
}