サンプル
|
1 2 3 4 5 6 |
<style> p { background-color: lightsalmon; padding: 20px; } </style> |
|
1 2 3 4 5 6 |
<style> p.test1 img { transform: skewx(15deg); } </style> <p class="test1"> <img src="sample.jpg"> </p> |
|
1 2 3 4 5 6 |
<style> p.test2 img { transform: skewy(15deg); } </style> <p class="test2"> <img src="sample.jpg"> </p> |
|
1 2 3 4 5 6 |
<style> p.test3 img { transform: skew(15deg,15deg); } </style> <p class="test3"> <img src="sample.jpg"> </p> |
|
1 2 3 4 5 6 7 8 9 |
<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