このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
scale
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2022年8月以降、すべてのブラウザーで利用可能です。
scale は CSS のプロパティで、transform とは個別に独立しての変倍の座標変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で座標変換関数を指定する実際の順序を思い出す手間を軽減します。
試してみましょう
scale: none;
scale: 1.5;
scale: 1.7 50%;
scale: 1 -1;
scale: 1.2 1.2 2;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 800px;
perspective-origin: 150% 150%;
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
構文
/* キーワード値 */
scale: none;
/* 1 つの値 */
/* 1 または 100% より大きい値で要素を拡大 */
scale: 2;
/* 1 または 100% より小さい値で要素を縮小 */
scale: 50%;
/* 2 つの値 */
scale: 2 0.5;
/* 3 つの値 */
scale: 200% 50% 200%;
/* グローバル値 */
scale: inherit;
scale: initial;
scale: revert;
scale: revert-layer;
scale: unset;
値
- 1 つの値
-
該当する要素の変倍率を指定する
<number>または<percentage>であり、 X および Y 軸で同じ倍率になります。scale()(2D の変倍)関数に 1 つの値を指定した場合と等価です。 - 2 つの値
-
2 つの
<number>または<percentage>値で、2D の変倍における X 軸と Y 軸の変倍率を(それぞれ)指定します。scale()(2D の変倍)関数に 2 つの値を指定した場合と等価です。 - 3 つの値
-
3 つの
<number>または<percentage>値で、3D の変倍における X 軸と Y 軸と Z 軸の変倍率を(それぞれ)指定します。scale3d()(3D の変倍)関数と等価です。 none-
変倍が適用されないことを示します。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 座標変換 |
| 重ね合わせコンテキストの生成 | あり |
形式文法
scale =
none |
[ <number> | <percentage> ] {1,3}
例
ホバー時の要素の変倍
次の例は、ホバー時に要素を変倍する方法を示しています。
2 つのボックスが表示されており、 1 つは 1 つの scale 値を持ち、両軸に沿って要素を変倍します。
2 つ目のボックスには2つの scale 値が示されており、 X 軸と Y 軸のそれぞれに沿って要素を変倍します。
HTML
<div class="box" id="box1">単一の値</div>
<div class="box" id="box2">2 つの値</div>
CSS
.box {
float: left;
margin: 1em;
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}
#box1:hover {
scale: 1.25;
}
#box2:hover {
scale: 1.25 0.75;
}
結果
仕様書
| 仕様書 |
|---|
| CSS Transforms Module Level 2 # individual-transforms |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
メモ: skew には独立した transform の値はありません