CSSプロパティTransformの使い方と応用方法

CSSでアニメーションや高度なデザインを作る際に欠かせないプロパティであるTransformプロパティを、みなさんはご存知でしょうか？

Transformを日本語に翻訳すると、「変換」という意味になります。

変換という言葉から想像できるとおり、要素に何らかの変化を加えるためのプロパティであることが想像できるかと思います。

簡単に説明するとTransformプロパティを使うことで、要素に傾斜をかけたり、拡大縮小、平行移動、回転など、さまざまな変換をかけることができます。

また、Transformプロパティを使うことによってGPUで数値計算が行われるため、高速でスムーズなアニメーション表現が可能になります。

初めてTransformプロパティを学習する方は少し難しく感じるかもしれませんが、実際にコードを書いみて体験することでスムーズに理解できるかと思います。

もう既に知ってるよという方は、Transformプロパティの応用方法まで詳しく解説しているので、今までの復習や新しい発見もかねて読んでいただければと思います。

コーディングお役立ちツール

transform skew の使い方

transform skewを使うと要素に傾斜をかけることができます。

transform skewはskew関数と、skewX関数、skewY関数の3種類の使い方ができ、関数の種類によって傾斜の向きを変えることができます。

傾斜を数値化するというと感覚的に掴みづらいかもしれませんが、サンプルコードを参考にしながら実際に書き進めてみると分かりやすく理解できますよ！

transrom skew のサンプルはコチラ

transform skew 関数の使い方

transform skew関数はX軸方向の傾斜と、Y軸方向の傾斜を同時に書き表すことができます。

例えば、transform: skew(X軸方向の傾斜deg, Y軸方向の傾斜deg); と第一引数にはX軸方向の値、第二引数にはY軸方向の値を入れて実行します。

また、注意点として値は弧度法(ラジアン)の値ではなく度数方で角度を書くようにしましょう。

transform skew 関数のサンプルコード

<img id="skewXY" src="hoge.png" alt="transform: skew(30deg, 30deg);">

#skewXY {
    transform: skew(30deg, 30deg);
}

上記サンプルコードのようにtransform skew 関数を使いX軸方向に30度傾斜させ、Y軸方向に30度傾斜させた結果が画像のような実行結果になります。

transform skewX 関数の使い方

transform skewX 関数は引数を一つだけ取り、X軸方向の傾斜だけを指定します。

transform skewX 関数のサンプルコード

<img id="skewX" src="hoge.png" alt="transform: skewX(30deg);">

#skewX {
    transform: skewX(30deg);
}

上記サンプルコードのようにX軸方向に30度傾斜させ、画像のような実行結果になります。

transform skewY 関数の使い方

transform skewY 関数は引数を一つだけ取り、Y軸方向の傾斜だけを指定します。

transform skewY 関数のサンプルコード

<img id="skewY" src="hoge.png" alt="transform: skewY(30deg);">

#skewY {
    transform: skewY(30deg);
}

上記サンプルコードのようにY軸方向に30度傾斜させ、画像のような実行結果になります。

transform scale の使い方

transform scaleを使うと要素を拡大縮小させることができます。

transform scaleはscale関数と、scaleX関数、scaleY関数、scaleZ関数、scale3d関数の5種類の使い方ができ、関数の種類によって拡大縮小の比率を変えることができます。

比率を数値化するというのは感覚的に掴みやすいので、直ぐに理解できるはずです。

transform scale のサンプルはコチラ

transform scale 関数の使い方

transform scale関数はX軸方向の拡大縮小の比率と、Y軸方向の拡大縮小の比率を同時に書き表すことができます。

例えば、transform: scale(X軸方向の拡大縮小の比率, Y軸方向の拡大縮小の比率); と第一引数にはX軸方向の値、第二引数にはY軸方向の値を入れて実行します。

また、引数には数字を代入して比率が変わらない場合は「1」または「1.0」、二倍にしたい場合は「2」または「2.0」と記述します。

transform scale 関数のサンプルコード

<img id="scaleXY" src="hoge.png" alt="transform: scale(2.0, 2.0);">

#scaleXY {
    transform: scale(2.0, 2.0);
}

上記サンプルコードのようにX軸方向とY軸方向に2倍させることで画像のような実行結果になります。

transform scaleX 関数の使い方

transform scaleX 関数は引数を一つだけ取り、X軸方向の拡大縮小の値だけを指定します。

transform scaleX 関数のサンプルコード

<img id="scaleX" src="hoge.png" alt="transform: scaleX(2.0);">

#scaleX {
    transform: scaleX(2.0);
}

上記サンプルコードのようにX軸方向に2倍拡大させることによって、画像のような実行結果になります。

transform scaleY 関数の使い方

transform scaleY 関数は引数を一つだけ取り、Y軸方向の拡大縮小の値だけを指定します。

transform scaleY 関数のサンプルコード

<img id="scaleY" src="hoge.png" alt="transform: scaleY(2.0);">

#scaleY {
    transform: scaleY(2.0);
}

上記サンプルコードのようにY軸方向に2倍拡大させることによって、画像のような実行結果になります。

transform scaleZ 関数の使い方

transform scaleZ 関数は引数を一つだけ取り、Z軸方向の拡大縮小の値だけを指定します。

transform scaleZ 関数のサンプルコード

<img id="scaleZ" src="hoge.png" alt="transform: scaleZ(2.0);">

#scaleZ {
    transform: scaleZ(2.0);
}

上記サンプルコードのようにZ軸方向に2倍拡大させることによって、画像のような実行結果になります。

transform scale3d 関数の使い方

transform scale3d 関数は引数を3つ取り、X軸方向とY軸方向とZ軸方向の拡大縮小の値を同時に指定することができます。

transform scale3d 関数のサンプルコード

<img id="scale3d" src="hoge.png" alt="transform: scale3d(2.0, 2.0, 2.0);">

#scale3d {
    transform: scale3d(2.0, 2.0, 2.0);
}

上記サンプルコードのように3次元方向に2倍拡大させることによって、画像のような実行結果になります。

transform rotate の使い方

transform rotateを使うと要素を回転させることができます。

transform rotateはrotate関数と、rotateX関数、rotateY関数、rotateZ関数、rotate3d関数の5種類の使い方ができ、関数の種類によって回転させる軸と回転度合いを指定することができます。

transform rotate のサンプルはコチラ

transform rotate 関数の使い方

transform rotate 関数は引数を1つだけ取り、X軸とY軸を起点として回転率を同時に指定できます。

transform rotate 関数のサンプルコード

<img id="rotateXY" src="hoge.png" alt="transform: rotate(70deg);">

#rotateXY {
    transform: rotate(70deg);
}

上記サンプルコードのようにX軸とY軸を起点に70度回転させることによって、画像のような実行結果になります。

transform rotateX 関数の使い方

transform rotateX 関数は引数を1つだけ取り、X軸を起点とした回転率だけを指定できます。

transform rotateX 関数のサンプルコード

<img id="rotateX" src="hoge.png" alt="transform: rotateX(70deg);">

#rotateX {
    transform: rotateX(70deg);
}

上記サンプルコードのようにX軸を起点に70度回転させることによって、画像のような実行結果になります。

transform rotateY 関数の使い方

transform rotateY 関数は引数を1つだけ取り、Y軸を起点とした回転率だけを指定できます。

transform rotateY 関数のサンプルコード

<img id="rotateY" src="hoge.png" alt="transform: rotateY(70deg);">

#rotateY {
    transform: rotateY(70deg);
}

上記サンプルコードのようにY軸を起点に70度回転させることによって、画像のような実行結果になります。

transform rotateZ 関数の使い方

transform rotateZ 関数は引数を1つだけ取り、Z軸を起点とした回転率だけを指定できます。

transform rotateZ 関数のサンプルコード

<img id="rotateZ" src="hoge.png" alt="transform: rotateZ(70deg);">

#rotateZ {
    transform: rotateZ(70deg);
}

上記サンプルコードのようにZ軸を起点に70度回転させることによって、画像のような実行結果になります。

transform rotate3d 関数の使い方

transform rotate3d 関数は引数を4つ取り、第三引数までは回転させる要素のベクトルの向きを指定して第四引数には角度を指定します。

transform rotate3d 関数のサンプルコード

<img id="rotate3d" src="hoge.png" alt="transform: rotate3d(0, 0, 1, 70deg);">

#rotate3d {
    transform: rotate3d(0, 0, 1, 70deg);
}

上記サンプルコードのように第三引数まで回転させるの要素のベクトルを指定しています。

この場合は、Y軸の方向に向くようにして70度回転させることで、画像のような実行結果が得られます。

transform translate の使い方

transform translateを使うと要素を移動させることができます。

transform rotateはtranslate関数と、translateX関数、translateY関数、translateZ関数、translate3d関数の5種類の使い方ができ、関数の種類によって移動させる軸の方向を指定することができます。

transform translate のサンプルはコチラ

transform translate 関数の使い方

transform translate 関数は引数を2つ取り、X軸方向への移動量とY軸方向への移動量を同時に指定することができます。

値は単位は「px」か、または「%」の指定が可能です。

transform translate 関数のサンプルコード

<img id="translateXY" src="hoge.png" alt="transform: translate(30px, 30px);">

#translateXY {
    transform: translate(30px, 30px);
}

上記サンプルコードのように第一引数にX軸方向の移動量を指定して、第二引数にはY軸方向の移動量を指定しています。

この場合は、X軸方向に30px移動して、さらにY軸方向へも30px移動するので、画像のように右下にイラストが来ている状態になります。

ただし、数学で出てくる座標軸のマイナス、プラスとは向きが異なり、translateのY軸の値は下向きがプラスの値で、上向きがマイナスの値を取ることに注意しましょう。

transform translateX 関数の使い方

transform translateX 関数は引数を1つだけ取り、X軸方向へ移動するための値を指定できます。

transform translateX 関数のサンプルコード

<img id="translateX" src="hoge.png" alt="transform: translateX(30px);">

#translateX {
    transform: translateX(30px);
}

上記サンプルコードのようにX軸方向に30px移動させることによって、画像のような実行結果になります。

transform translateY 関数の使い方

transform translateY 関数は引数を1つだけ取り、Y軸方向へ移動するための値を指定できます。

transform translateY 関数のサンプルコード

<img id="translateY" src="hoge.png" alt="transform: translateY(30px);">

#translateY {
    transform: translateY(30px);
}

上記サンプルコードのようにY軸方向に30px移動させることによって、画像のような実行結果になります。

transform translateZ 関数の使い方

transform translateZ 関数は引数を1つだけ取り、Z軸方向へ移動するための値を指定できます。

transform translateZ 関数のサンプルコード

<img id="translateZ" src="hoge.png" alt="transform: translateZ(-30px);">

#translateZ {
    transform: translateZ(-30px);
}

上記サンプルコードのようにマイナスのZ軸方向に30px移動させることによって、画像のような実行結果になります。

transform translate3d 関数の使い方

transform translate3d 関数は引数を3つ指定でき、X軸、Y軸、Z軸方向への移動量を表すことができます。

transform translate3d 関数のサンプルコード

<img id="translate3d" src="hoge.png" alt="transform: translate3d(30px, 30px, 30px);">

#translate3d {
    transform: translate3d(30px, 30px, 30px);
}

上記サンプルコードのようにX軸、Y軸、Z軸方向に30px移動させることによって、画像のような実行結果になります。

transform perspective の使い方

transform perspectiveを使うことによってDOM要素に奥行きを付けて3Dの立体空間のように見せることができるようになります。

そして、新しく紹介するperspective プロパティで奥行きに度合いを「px」で調節してtransform のrotateやtranslate関数を使うことによって画像のような表現が可能になります。

rotate関数やtransform関数の使い方にある程度慣れてきてから挑戦することオススメします。

transform perspectiveのサンプルはコチラ

transform perspective のサンプルコード

<div class="cube">
    <div class="cube_top cube_surface">top</div>
    <div class="cube_right cube_surface">right</div>
    <div class="cube_bottom cube_surface">bottom</div>
    <div class="cube_left cube_surface">left</div>
    <div class="cube_front cube_surface">front</div>
    <div class="cube_back cube_surface">back</div>
</div>

@keyframes rotateAnimation {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
.cube {
    z-index: 1;
    position: relative;
    top: 0px;
    left: 0px;
    margin: auto;
    width: 100px;
    height: 100px;
    line-height: 100px;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: rotateAnimation 10s linear infinite;
}
.cube_surface {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
}
.cube_top {
    background-color: rgba(255, 0, 0, 0.5);
    transform: translateY(-50px) rotateX(90deg);
}
.cube_right {
    background-color: rgba(255, 255, 0, 0.5);
    transform: translateX(50px) rotateY(90deg);
}
.cube_bottom {
    background-color: rgba(0, 255, 0, 0.5);
    transform: translateY(50px) rotateX(90deg);
}
.cube_left {
    background-color: rgba(0, 255, 255, 0.5);
    transform: translateX(-50px) rotateY(90deg);
}
.cube_front {
    background-color: rgba(0, 0, 255, 0.5);
    transform: translateZ(50px);
}
.cube_back {
    background-color: rgba(255, 0, 255, 0.5);
    transform: translateZ(-50px);
}

transform matrix 関数の使い方

transform matrix 関数は引数を6つ取り、第一引はX軸方向の拡大縮小の値、第二引数にはX軸方向の傾斜の値、第三引数にはY軸方向の傾斜の値、第四引数にはY軸方向への拡大縮小の値、第五引数にはX軸方向への移動量の値、第六引数にはY軸方向への移動量の値を指定します。

つまり、一つの関数でtransformプロパティの各関数の結果を表現することができるのです。

transform matrix 関すの引数

X軸方向の拡大縮小の値
X軸方向の傾斜の値
Y軸方向の傾斜の値
Y軸方向への拡大縮小の値
X軸方向への移動量の値
Y軸方向への移動量の値

transform matrix 関数のサンプルはコチラ

transform matirx 関数のサンプルコード

<img id="matrix_obj" src="hoge.png" alt="transform: matrix(0, -1, 1, 0, 50, 50);">

#matrix_obj {
    transform: matrix(0, -1, 1, 0, 50, 50);
}

サンプルコードのCSSでは(0, -1, 1, 0, 50, 50)とmatrix 関数に値を入れていますが、どのようにしてサンプル画像のような結果が得られているかを解説します。

実は上の解説にはありませんでしたが、matrix 関数の第四引数までの値を変えることに回転行列を使いrotateを表現することができます。

まずは回転する場合第一引数にはcosθ、第二引数には-sinθ、第三引数にはsinθ、第四引数にはcosθの値を入れることになります。

もしもこの値をJavascriptで計算する場合は以下のようになります。

let degree = 90;
let radian = degree / 180 * Math.PI;

let scale_x = Math.cos(radian);
let skew_x = -Math.sin(radian);
let skew_y = Math.sin(radian);
let scale_y = Math.cos(radian);

matrix 関数で回転する場合の引数