【CSS】「transform」プロパティの使い方！【分かりやすい】
しゅーた（@chibasyuta）です！
この記事ではCSSの「transform」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。
「transform」プロパティを使うと、要素を「平行移動」「回転」「拡大縮小」「歪ませる」「視点の距離を変える」ことができます。
これらのどれか１つの変化を行うこともできますし、複数の変化をつけることも可能です。
この記事の内容！
- 「transform」プロパティを使うと何ができるのか？
- 「transform」プロパティの使い方！
それでは内容へ入ります！
「transform」プロパティを使うと何ができるのか？
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>.container {
width: 1200px;
margin: 180px auto;
display: flex;
justify-content: space-around;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
transition-duration: 0.6s;
}
.box:nth-child(1):hover {
transform: translate(0, 50px);
}
.box:nth-child(2):hover {
transform: rotate(90deg);
}
.box:nth-child(3):hover {
transform: scale(1.5);
}
.box:nth-child(4):hover {
transform: skew(40deg, 0deg);
}「transform」プロパティを使うと、要素を「平行移動」「回転」「拡大縮小」「歪ませる」「視点の距離を変える」ことができます。
これらのどれか１つの変化を行うこともできますし、複数の変化をつけることも可能です。
また、これらを「座標変換」と呼びます。
「transform」プロパティの使い方！
「transform」は６つのタイプの「座標変換関数」を使って指定する。
「transform」は下記の６つのタイプの「座標変換関数」を使って指定します。
- 「平行移動」
- 「回転」
- 「拡大縮小」
- 「歪み」
- 「視点距離」
- 「行列変換」
基本的にCSSのこれらの６つのタイプの「座標変換関数」を用いて「transform」の指定をすることができます。
もしくは「none」というキーワードです。
「none」は初期値で「座標変換」は起きません。
初期値は「none」というキーワード
「transform」の初期値は「none」で「座標変換」は起きません。
「none」は全ての座標変換を打ち消したいときに設定してあげるといいですね。
複数の箇所から同じ要素にスタイルが当たっている場合、座標変換を打ち消したくて１つの「transform」プロパティをコメント化しても、また別の箇所にあるコードからスタイルが当たってしまいます。こんな時は「none」を使ってあげるといいでしょう！
３つの「軸」について
また、「x軸」と「y軸」に対して垂直に交わる軸が「z軸」になります。方向はパソコンの画面から僕らに向かってくる感じの方向です。
「平行移動」の「座標変換関数」の使い方！
「平行移動」の「座標変換関数」は下記の通りです。
- translate()
- translateX()
- translateY()
- translateZ()
- translate3d()
これらを使うことができます。
「translate()」について
.box:hover {
transform: translate(100px, 200px);
}「translate()」を使うことで要素を「平行移動」させることができます。
「,」カンマ区切りで「２つの値」を指定します。
「１つ目の値」は「x軸方向」で、
「２つ目の値」は「y軸方向」に要素を平行移動させることができます。
また、２つ目の値は省略可能で、要素はその値の分だけ「x軸方向」に要素は平行移動します。
「translateX()」について
.box:hover {
transform: translateX(100px);
}「translateX()」は１つの値をとり、その値の分だけ「x軸方向」に要素を平行移動させることができます。
「translateY()」について
.box:hover {
transform: translateY(100px);
}「translateY()」は１つの値をとり、その値の分だけ「y軸方向」に要素を平行移動させることができます。
「translateZ()」について
<div class="container">
<div class="box"></div>
</div>.container {
width: 1000px;
margin: 180px auto;
perspective: 500px;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
transition-duration: 0.6s;
}
.box:hover {
transform: translateZ(100px);
}「translateZ()」は１つの値をとり、その値の分だけ「Z軸方向」に要素を平行移動させることができます。
また「translateZ()」で動かす要素の親要素に「perspective」プロパティの指定がないと、「z軸方向」に要素を動かしても動いて見えないので注意してください。
「translate3d()」について
<div class="container">
<div class="box"></div>
</div>.container {
width: 1000px;
margin: 100px auto;
perspective: 800px;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
transition-duration: 0.6s;
}
.box:hover {
transform: translate3d(100px, 100px, 100px);
}「translate3d()」は３つの値を取り要素を「３次元空間」で平行移動させることができます。
１つ目の値で「x軸方向」に、
２つ目の値で「y軸方向」に、
３つ目の値で「z軸方向」に平行移動させられます。
また、「z軸方向」に要素を動かす場合は、動かす要素の親要素に「perspective」プロパティの指定が必須になるので注意してください。
「回転」の「座標変換関数」の使い方！
「回転」の「座標変換関数」は下記の通りです。
- rotate()
- rotateX()
- rotateY()
- rotateZ()
- rotate3d()
これらを使うことができます。
「rotate()」について
.box:hover {
transform: rotate(90deg);
}「rotate()」を使うと要素を「回転」させることができます。
引数には１つの角度を表す値を取ります。
正の値の角度を取ると「時計回り」に回って見えますね。
「rotateX()」について
<div class="container">
<div class="box"></div>
</div>.container {
width: 1000px;
margin: 150px auto;
perspective: 800px;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
transition-duration: 0.6s;
}
.box:hover {
transform: rotateX(45deg);
}「rotateX()」を使うと要素を「x軸」を中心に回転させることができます。
「rotateY()」について
<div class="container">
<div class="box"></div>
</div>.container {
width: 1000px;
margin: 150px auto;
perspective: 800px;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
transition-duration: 0.6s;
}
.box:hover {
transform: rotateY(45deg);
}「rotateY()」を使うと要素を「y軸」を中心に回転させることができます。
「rotateZ()」について
<div class="container">
<div class="box"></div>
</div>.container {
width: 1000px;
margin: 150px auto;
perspective: 800px;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
transition-duration: 0.6s;
}
.box:hover {
transform: rotateZ(45deg);
}「rotateZ()」を使うと要素を「z軸」を中心に回転させることができます。
「rotate3d()」について
<div class="dice">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>.dice {
width: 200px;
height: 200px;
transition-duration: 0.6s;
transform-style: preserve-3d;
}
.dice:hover {
transform: rotate3d(1, 1, 1, 45deg);
}
.box {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
color: white;
}
.box:nth-child(1) {
background-color: skyblue;
translate: 0 0 100px;
}
.box:nth-child(2) {
background-color: yellow;
rotate: y 90deg;
translate: 100px;
}
.box:nth-child(3) {
background-color: red;
rotate: y -90deg;
translate: -100px;
}
.box:nth-child(4) {
background-color: green;
rotate: x -90deg;
translate: 0 100px;
}
.box:nth-child(5) {
background-color: brown;
rotate: x -90deg;
translate: 0 -100px;
}
.box:nth-child(6) {
background-color: blue;
translate: 0 0 -100px;
}「rotate3d()」を使うと要素を「3D空間にある軸」を中心に回転させることができます。
引数はカンマ区切りで４つ書きます。
最初の３つの引数で表すベクトルで「軸」の指定ができて、４つの目の値で「回転する角度」の指定ができます。
１つ目の値で、「x軸方向の成分」
２つ目の値で、「y軸方向の成分」
３つ目の値で、「z軸方向の成分」
そして、それら３つの成分を合成してできる「ベクトル」の方向の軸を中心にして、
４つ目の値で「回転する角度」の指定ができます。
「拡大縮小」の「座標変換関数」の使い方！
「拡大縮小」の「座標変換関数」は下記の通りです。
- scale()
- scaleX()
- scaleY()
- scaleZ()
- scale3d()
これらを使うことができます。
「scale()」について
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>.container {
width: 700px;
margin: 150px auto;
perspective: 800px;
transform-style: preserve-3d;
display: flex;
justify-content: space-between;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
transition-duration: 0.6s;
}
.box:nth-child(1):hover {
transform: scale(1.5);
}
.box:nth-child(2):hover {
transform: scale(1.5, 1);
}「scale()」を使うと要素を「拡大縮小」することができます。
引数が「１つの数値」の場合は、その数値は「x軸方向」と「y軸方向」に対する「倍率」を表します。
引数が「２つの数値」の場合は、
１つ目の値で「x軸方向」の「倍率」
２つ目の値で「y軸方向」の「倍率」の指定ができます。
また、「scale()」は「２D平面」での倍率だけを変更することができる点に注意してください。
「scaleX()」について
.box:hover {
transform: scaleX(1.5);
}「scaleX()」を使うと「x軸方向」の「倍率」の指定ができます。
つまり「水平方向」にだけ「拡大縮小」したい場合に使えますね。
「scaleY()」について
.box:hover {
transform: scaleY(1.5);
}「scaleY()」を使うと「y軸方向」の「倍率」の指定ができます。
つまり「垂直方向」にだけ「拡大縮小」したい場合に使えますね。
「scaleZ()」について
.dice:hover {
transform: scaleZ(2);
}「scaleZ()」を使うと「z軸方向」の「倍率」の指定ができます。
「scaleZ()」を使う要素の親要素に「transform-style: preserve-3d;」という指定があって、要素が３D空間に配置されている必要があるのでその点は注意してください。
「scale3d()」について
.dice:hover {
transform: scale3d(0.5, 1.5, 3);
}「scale3d()」を使うと「x軸方向」「y軸方向」「z軸方向」の「倍率」の指定がそれぞれ別々にできます。
「,」カンマ区切りで３つの値を引数を取ります。
１つ目の値で、「x軸方向」の倍率
２つ目の値で、「y軸方向」の倍率
３つ目の値で、「z軸方向」の倍率の指定ができる感じです。
「歪ませる」の「座標変換関数」の使い方！
「歪ませる」の「座標変換関数」は下記の通りです。
- skew()
- skewX()
- skewY()
これらを使うことができます。
「skew()」について
「skew()」を使うと要素を「2D平面上」で歪ませることができます。
１つ目の値で、「x軸方向」の歪みの設定ができ、
２つ目の値で、「y軸方向」の歪みの設定ができます。
どのくらい歪ませるのかを「角度」で指定するという特徴があります。
「skewX()」について
「skewX()」を使うと「x軸方向」にだけ要素を歪ませることができます。
ポイントは、要素の「高さ」は変わっていない点ですね。
引数には「角度」の指定をします。
「skewY()」について
「skewY()」を使うと「y軸方向」にだけ要素を歪ませることができます。
ポイントは、要素の「幅」は変わっていない点ですね。
引数には「角度」の指定をします。
「視点距離」の「座標変換関数」の使い方！
「視点距離」の「座標変換関数」は「perspective()」だけです。
「perspective()」を使うと、「ユーザー」と「z=0平面」の「距離」の指定ができます。
使い方は、「perspective」プロパティと一緒ですので、気になる方は下記の記事をお読みください！
【CSS】「perspective」プロパティの使い方！【分かりやすい】
「行列変換」の「座標変換関数」の使い方！
「行列変換」の「座標変換関数」は「matrix()」と「matrix3d()」があります。
これは「行列」を使って、要素の座標を変換するものなのですが、使用頻度が低いのと、解説しているとこれだけで１記事になってしまうボリュームになるのでここでは省略します。
もし解説した記事を書いた場合はここにリンクを張っておきますね。
１つの要素に対して、複数の「座標変換関数」が使える。
「半角空白」「改行」区切りで書くことで複数の「座標変換関数」の指定ができる。
.box:hover {
transform: translateX(250px) rotate(45deg) scale(0.5);
}「半角空白」「改行」区切りで書くことで複数の「座標変換関数」の指定ができます。
続けて書くことで無限に追加することができますね。
書く順番で「意味が変わる」
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>.container {
width: 1000px;
margin: 100px auto;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
transition-duration: 1s;
position: absolute;
top: 0;
left: 0;
}
.box:nth-child(1) {
background-color: #ddd;
}
.box:nth-child(2) {
background-color: skyblue;
transform: translate(400px) rotate(45deg);
}
.box:nth-child(3) {
background-color: pink;
transform: rotate(45deg) translate(400px);
}「平行移動」してから「回転」させるのと、
「回転」させてから「平行移動」するのとでは、最終的に要素が移動する位置が変わるので、その点に注意してください！
参考リンク！
仕様書。
https://drafts.csswg.org/css-transforms/#transform-property
MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/transform
https://developer.mozilla.org/ja/docs/Web/CSS/transform-function
おすすめの再生リスト！
こちらは僕が制作したYouTubeの再生リスト「CSSのアニメーション編」です。
「CSSのアニメーション編」はCSSを使ったアニメーションの知識が網羅的に学習できるコンテンツとなります。
こちらの再生リストでCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！
まとめ！
「transform」プロパティを使うと、要素を「平行移動」「回転」「拡大縮小」「歪ませる」「視点の距離を変える」ことができます。
「transform」は下記の６つのタイプの「座標変換関数」を使って指定します。
- 「平行移動」
- 「回転」
- 「拡大縮小」
- 「歪み」
- 「視点距離」
- 「行列変換」
「transform」の初期値は「none」で「座標変換」は起きません。
１つの要素に対して、複数の「座標変換関数」が使える。
この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！
それではこんな感じでこの記事を終わります！
ではまた！