scaleX()

試してみましょう

transform: scaleX(1);

transform: scaleX(0.7);

transform: scaleX(1.3);

transform: scaleX(-0.5);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/proxy/developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

これは要素のそれぞれの点の横軸（水平、 X 成分）を一定の係数で修正しますが、係数が 1 である場合は、この関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 scaleX(-1) は軸の線対称を定義し、垂直軸は (transform-origin プロパティの指定通りに) 原点を通過します。

構文

scaleX(s)

値

s

<number> で、要素のそれぞれの点の横座標に適用される変倍率を表します。

形式文法

<scaleX()> = 
  scaleX( <number> )  

例

HTML

<div>通常</div>
<div class="scaled">変倍</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}

結果

仕様書

ブラウザーの互換性

関連情報

• scaleY()
• scaleZ()
• transform
• scale
• <transform-function>
• transform-origin
• 他の独立した座標変換プロパティ:
  • translate
  • rotate
  • 注: skew プロパティはありません