CSS - scale

トップ > CSSリファレンス > scale

概要

属性名 scale
none | [ <number> | <percentage> ]{1,3}
初期値none
適用可能要素トランスフォーム可能要素
継承しない
サポートhttps://caniuse.com/?search=scale

説明

transformscale() と同様、X軸、Y軸、Z軸方向の縮小・拡大を行います。値をひとつ指定するとX軸、2つ指定するとX軸とY軸、3つ指定するとX軸・Y軸・Z軸で縮小・拡大します。

説明
none移動しません。
<number>縮小・拡大率を 1.5 などの数値で指定します。
<percentage>縮小・拡大率を 150% などのパーセントで指定します。

使用例

CSS
#box1 {
  height: 12rem;
  width: 12rem;
  border: 1px solid #999;
}
#img1 {
  translate: 4rem 4rem;
  scale: 2.0;
  rotate: 180deg;
}
HTML
<div id="box1">
  <img id="img1" src="../../image/juno-tora.png" alt="Tora">
</div>
表示
Tora

関連項目

translate, rotate, transform

リンク


Copyright (C) 2022 杜甫々
初版:2022年8月21日、最終更新:2022年8月21日
http://www.tohoho-web.com/css/prop/scale.htm