[CSS] 基本メモ: 幾何変換スケーリング – 端くれプログラマの備忘録

サンプル

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

<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.test1 img { transform: scale(1.0,1.0); }

</style>

</p>

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

<style>

p.test2 img { transform: scalex(0.5); }

</style>

</p>

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

<style>

p.test3 img { transform: scaley(0.5); }

</style>

</p>

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

<style>

p.test4 img {

transform-origin: 0px 0px;

transform: scalex(0.5);

}

</style>

</p>

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