CSS3 rotate & scale 回転、拡大縮小

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

CSS3 回転、拡大縮小をする方法です。

個人的に拡大縮小は画像がジャギるのであまり使いませんが(画像以外ではおk)
容量の事を考えると、時と場合によってはとても便利です。
(詳しくはCSSだけで画像を反転させる方法へ)

実際のコードは…

Rotate


#sample{
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
}

になりますが、回転の対象がインラインだとうまくいかない事があります。
その際はdisplay:block;を追加解決します。
一応留意点です。

表示確認

Scale


#sample{
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}

サンプルコードでは0.5倍を実現できます。

表示確認