[CSS] 基本メモ: 幾何変換傾斜

Categories:

サンプル

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

<style>
p.test1 img { transform: skewx(15deg); }
</style>
<p class="test1">
<img src="sample.jpg">
</p>

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

<style>
p.test3 img { transform: skew(15deg,15deg); }
</style>
<p class="test3">
<img src="sample.jpg">
</p>

<style>
p.test4 img { 
 transform-origin: 0 0;
 transform: skew(15deg,15deg);
}
</style>
<p class="test4">
<img src="sample.jpg">
</p>

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