scale
scale は CSS のプロパティで、 transform とは個別に独立して倍率変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で変換関数を指定する実際の順序を思い出す手間を軽減します。
構文
/* キーワード値 */
scale: none;
/* １つの値 */
/* 1より大きい値で要素を拡大 */
scale: 2;
/* 1より小さい値で要素を縮小 */
scale: 0.5;
/* ２つの値 */
scale: 2 0.5;
/* ３つの値 */
scale: 2 0.5 2;値
- １つの数値
- 該当する要素の拡大率を指定する
<number>であり、 X 及び Y 軸で同じ倍率になります。scale()(2D 倍率) 関数に１つの値を指定した場合と等価です。 - ２つの長さ/パーセント値
- ２つの
<number>値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。scale()(2D 倍率) 関数に２つの値を指定した場合と等価です。 - ３つの長さ/パーセント値
- ３つの
<number>値で、 3D 倍率における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。translate3d()(3D 倍率) 関数と等価です。 none- 拡大率が適用されないことを示します。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | 変形可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 変形 |
| 重ね合わせコンテキストの生成 | あり |
形式文法
例
上に乗った際の要素の拡大Scaling an element on hover
HTML
<div>
<p class="scale">Scaling</p>
</div>CSS
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
div {
width: 150px;
margin: 0 auto;
}
p {
padding: 10px 5px;
border: 3px solid black;
border-radius: 20px;
width: 150px;
font-size: 1.2rem;
text-align: center;
}
.scale {
transition: scale 1s;
}
div:hover .scale {
scale: 2 0.7;
}
結果
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Transforms Level 2 individual transforms の定義 |
編集者草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser