CSS3 rotate & scale 回転、拡大縮小
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
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倍を実現できます。