【CSS】「scale」プロパティの使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「scale」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「scale」プロパティを使うと「要素を拡大縮小」させることができます。

また、下の動画でもCSSの「scale」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「scale」プロパティを使うと何ができるのか？

<div class="container">
    <div class="box"></div>
</div>

.container {
    width: 1000px;
    margin: 100px auto;
}
.box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transition-duration: 1s;
}
.box:hover {
    scale: 1.3;
}

「scale」プロパティを使うと「要素を拡大縮小」させることができます。

平行移動させたり、歪ませたり、回転させることはできませんが、「拡大縮小」させることは可能です！

なるほど！

前提知識！

まずは「scale」の指定に必要な前提知識からまとめますね。

「軸」について。

このような「軸」が存在します。

また、「x軸」と「y軸」に対して垂直に交わる軸が「z軸」になります。方向はパソコンの画面から僕らに向かってくる感じの方向です。

「scale」の使い方！

それでは「scale」の使い方をまとめていきますね！

「scale」の指定方法には何種類あるのか？

「scale」の指定方法は下記の通りです。

• 「none」キーワード
• １つの数値を使う
• ２つの数値を使う
• ３つの数値を使う

これら４つのタイプの指定方法があります。

「none」キーワード

「scale」の初期値は「none」です。

「none」を使うと「拡大縮小しない」ことを明示的に指定できます。

１つの数値を使う

.box:hover {
    scale: 1.3;
}

１つの数値を使うと「x軸」と「y軸」で等しい倍率で拡大縮小させることができます。

倍率を単位なしの数値で指定してあげればOKです。「％」も使えます。

２つの数値を使う

.box:hover {
    scale: 1.8 1.3;
}

２つの数値を使うと、下記のようになります。

1つ目の数値で「x軸」の倍率の指定

2つ目の数値で「y軸」の倍率の指定ができます。

３つの数値を使う

<div class="container">
    <div class="box">
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
        <div class="surface"></div>
    </div>
</div>

.container {
    width: 1000px;
    margin: 100px auto;
}
.box {
    position: relative;
    transition-duration: 1s;
    rotate: 1 1 1 -20deg;
    transform-style: preserve-3d;
}
.box:hover {
    scale: 1 1 2;
}
.surface {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    background-color: skyblue;
    border: 4px solid #333;
}
.surface:nth-child(1) {
    background-color: skyblue;
    translate: 0 0 100px;
}
.surface:nth-child(2) {
    rotate: x 90deg;
    translate: 0 100px;
}
.surface:nth-child(3) {
    rotate: y 90deg;
    translate: 100px;
}
.surface:nth-child(4) {
    rotate: y -90deg;
    translate: -100px;
}
.surface:nth-child(5) {
    rotate: x 90deg;
    translate: 0 -100px;
}
.surface:nth-child(6) {
    translate: 0 0 -100px;
}

３つの数値を使うと、下記のようになります。

1つ目の数値で「x軸」の倍率の指定

2つ目の数値で「y軸」の倍率の指定

3つ目の数値で「z軸」の倍率の指定ができます。

「％」による指定もできる！

「scale」プロパティには「%」による指定もできます。

「%」を使うと、その要素の幅や高さが基準となります。

アニメーションさせるなら「transition-duration」や「animation-duration」の指定を忘れずに！

「scale」を使うなら「transition-duration」や「animation-duration」と組み合わせて使わないと、一瞬で遷移が完了してしまい、アニメーションっぽく見えなくなってしまうので、注意しましょう。

「transition-duration」や「animation-duration」を使って、「アニメーションにかかる時間」の指定をしてあげることで初めてアニメーション感がでるのです。

もちろん、ただ要素を動かしたいだけの場合はOKですけどね！

参考リンク！

仕様書。
https://drafts.csswg.org/css-transforms-2/#individual-transforms

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/scale

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「CSSのアニメーション編」です。

「CSSのアニメーション編」はCSSを使ったアニメーションの知識が網羅的に学習できるコンテンツとなります。

こちらの再生リストでCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「scale」プロパティを使うと「要素を拡大縮小」させることができる。

「scale」の指定方法は下記の通りです。

• 「none」キーワード
• １つの数値を使う
• ２つの数値を使う
• ３つの数値を使う

アニメーションさせるなら「transition-duration」や「animation-duration」の指定を忘れずに！

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でもCSSの「scale」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！