文字の縦横比を変える

投稿日:2022-10-18 投稿者:PS カテゴリ:その他 タグ: , 

transform: scaleX(0.5);      // ヨコの比率を指定
transform: scaleY(0.5);      // タテの比率を指定
transform: scale(0.5, 1);    // 縦横の比率を同時に指定

文字の縦横比を変えるのが目的だが、transform() ではブロック全体に影響することに注意。

<div>サンプル</div>
サンプル

（分かりやすくなるよう枠をつけた。）

div { transform: scaleX(0.5); }
サンプル

DIV全体の幅が 50% になるので、位置が右にずれる。

div {
  transform: scaleX(0.5);
  transform-origin: top left;
}
サンプル

完了