CSSで要素の縮尺を変更する方法/transform:scaleプロパティの使い方

balloons IT

transformプロパティはCSS3から追加された新しいプロパティで、transform:scaleはその中でも要素の「伸縮」を担当しています。width・heightと似てますが、ちょっと使い方がちがいます。

Advertisements

transform:scaleの使い方

たとえばみっつの文字列に対して、それぞれCSSでtransform:scale(1)、(1.1)、(1.2)を指定してみます。

すると

このように

中心が

要素の中心にあるものとして縮尺が拡大されます。

要素の縮尺を変更
transform:scale(比率)

変更の中心点を変えるには、transform-originというプロパティが用意されています。詳しい説明は割愛して、ここでは上のみっつに対してそれぞれtransform-origin: 0 0;を指定してみたいと思います。

すると

このように

中心が

左上から0距離にあるものとして拡大がされます。transform:scaleを使う時は、transform-originも意識したほうが考えた通りの動きをさせやすいかもしれません。
transform:scaleはscaleXscaleYを同時に指定することができる命令で、値をふたつ指定した場合はそれぞれX軸とY軸を意味します。またはtransform:scaleX(1.5)のように指定することもできます。

transform:scale(1.5,1)

transform:scale(1,1.5)

transformはanimateで指定できない

scaleだけの話ではなく、transformはanimateで指定することができません。たとえば、

//jQuery
$('ID').animate({'transform':'scale(1.5,1)'})

とか書いても動きません。animateはpixelに変換できる処理でないと実行できないのだそうです。
cssでhoverやactiveを指定したり、transitionを設定しておいてjQueryのcssメソッドで変更する、などは可能です。

hoverで
伸縮する箱
/*CSS*/
.box{
transition:1s;
transform:scale(1,1);
width:100px;
height:100px;
border:1px solid black;
}
.box:hover{
transform:scale(1.5,1);
}
clickするたびに伸びる箱
/*CSS*/
.box2{
transition:1s;
transform:scale(1,1);
transform-origin: 0 0;
cursor:pointer;
width:100px;
height:100px;
border:1px solid black;
}

//jQuery
let x = 1;
$('.box2').click(function(){
x = x+0.5;
$(this).css('transform','scaleX(' + x + ')');
});
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。
JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント