[CSS] 基本メモ: 幾何変換移動

Categories:

サンプル

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

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

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

<style>
p.test3 img { transform: translatey(-5px); }
</style>
<p class="test3">
<img src="sample.jpg">
</p>

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