これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

草案
このページは完成していません。

CSSscale プロパティは、 transform とは個別に独立して倍率変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で変換関数を指定する実際の順序を思い出す手間を軽減します。

構文

/* キーワード値 */
scale: none;

/* 1つの値 */
/* 1より大きい値で要素を拡大 */
scale: 2;
/* 1より小さい値で要素を縮小 */
scale: 0.5;

/* 2つの値 */
scale: 2 0.5;

/* 3つの値 */
scale: 2 0.5 2;

1つの数値
該当する要素の拡大率を指定する <number> であり、 X 及び Y 軸で同じ倍率になります。 scale() (2D 倍率) 関数に1つの値を指定した場合と等価です。
2つの長さ/パーセント値
2つの <number> 値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 scale() (2D 倍率) 関数に2つの値を指定した場合と等価です。
3つの長さ/パーセント値
3つの <number> 値で、 3D 倍率における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 translate3d() (3D 倍率) 関数と等価です。
none
拡大率が適用されないことを示します。

形式文法

none | <number>{1,3}

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 の定義
編集者草案 初回定義。

初期値none
適用対象変形可能要素
継承不可
メディアvisual
計算値指定値
アニメーションの種類transform
正規順序per grammar
Creates stacking context継承する

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり なし601 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり なし601 なし なし あり

1. From version 60: this feature is behind the layout.css.individual-transform.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,