CSS3

プロパティ

scale

[Edge]⛌。→●、mdn

要素の拡縮率を指定。

［translate、rotate、scale］プロパティは、ユーザー インタフェースにおける代表的な用法に対応する仕方で、作者が単純な変形を独立に指定できるようにする ― transform における［translate()、rotate()、scale()］の動作の順序を覚えずに済むよう。これらのプロパティは、それらの動作（同順）を transform とは独立に保って、スクリーン座標内で動作する。【すなわち、これらのプロパティによる変形は、決められた順序で適用される。】

scale プロパティは、順に［X、Y、Z］軸方向の拡縮率を指定する 1 ～ 3 個の値を受容する：

• 2 個目の値（Y）が省略された場合の既定は、1 個目の値（X）と同じになる。
• 3 個目の値（Z）が省略された場合の既定は、1 になる。
• 3 個目の値が：
  • 省略されたか［1／100%］になる場合、2D 拡縮法を指定する ― scale() 関数と等価になる。
  • 他の場合、3D 拡縮法を指定する ― scale3d() 関数と等価になる。

  3 個目の値が省略されたときと［1／100%］が与えられたときとで、ふるまいに相違は無い。

none

まったく変形を施さないことを指示する。

[<number> | <percentage>]{1,3}

scale に指定された <percentage> は、同じ比率を与える <number> と等価になる ― 例えば、値 100% は 1 と等価になる。これらの <percentage> が直列化されるときには、<number> が利用される。

これら 3 種のプロパティは、いずれも none を既定の値として受容する ― それは、まったく変形を施さないことを指示する。特に、この値は、積層文脈やすべての子孫用の包含ブロックの作成を誘発しない。一方で、他のすべての値は（translate: 0px の様な“恒等”変形も含めて）、通例の変形と同じく、積層文脈、およびすべての子孫用の包含ブロックを作成する。

［translate／rotate／scale］が［アニメートまたは遷移］していて、その［from 値、to 値］のうち片方だけ none である場合、その none は、等価な恒等変形値［0px／0deg／1］に置換される。

テスト