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

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

transform:scaleの使い方
transformはanimateで指定できない

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はscaleXとscaleYを同時に指定することができる命令で、値をふたつ指定した場合はそれぞれ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 + ')');
});