[CSS] 基本メモ: 幾何変換スケーリング

Categories:

サンプル

<style>
p {
    background-color: lightsalmon;
    padding: 20px;
}
</style>

<style>
p.test1 img { transform: scale(1.0,1.0); }
</style>
<p class="test1">
<img src="sample.jpg">
</p>

<style>
p.test2 img { transform: scalex(0.5); }
</style>
<p class="test2">
<img src="sample.jpg">
</p>

<style>
p.test3 img { transform: scaley(0.5); }
</style>
<p class="test3">
<img src="sample.jpg">
</p>

<style>
p.test4 img {
 transform-origin: 0px 0px;
 transform: scalex(0.5);
}
</style>
<p class="test4">
<img src="sample.jpg">
</p>

transform:scale()－CSS3リファレンス
http://www.htmq.com/css3/transform_scale.shtml