パンくず
CSS3新要素
2D 3D 変形
transform:skew
概要
要素の傾斜変形を行うtransform:skewについて説明します
プロパティ名
transform:skew()
transform:skewX()
transform:skewY()
※2012/03/26現在、ベンダープリフィックスが必要
内容
要素の表示位置を移動させます
設定値
項目 | 内容 |
skew(x,y) | x=x軸、y=y軸。yは省略可。デフォルトは0 単位はdeg |
skewX(x) | x=x軸 単位はdeg |
skewY(y) | y=y軸 単位はdeg |
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>transform:skew</title> <style type="text/css"> p { border-style:solclass; border-wclassth:1px; border-color:#000; background-color:gray; wclassth:200px; height:100px; padding-left:100px; } p.container1 img { transform:skew(15deg,15deg); -webkit-transform:skew(15deg,15deg); -moz-transform:skew(15deg,15deg); -ms-transform:skew(15deg,15deg); -o-transform:skew(15deg,15deg); } p.container2 img { transform: translateX(45deg); -webkit-transform:skewX(45deg); -moz-transform:skewX(45deg); -ms-transform:skewX(45deg); -o-transform:skewX(45deg); } p.container3 img { transform: translateY(45deg); -webkit-transform:skewY(45deg); -moz-transform:skewY(45deg); -ms-transform:skewY(45deg); -o-transform:skewY(45deg); } </style> </head> <body> transform:skew(15deg,15deg); <p class="container1"><img class="transform-skew1" src="transform-skew.png" alt="" /></p> transform: skewX(45deg); <p class="container2"><img class="transform-skew2" src="transform-skew.png" alt="" /></p> transform: skewY(45deg); <p class="container3"><img class="transform-skew3" src="transform-skew.png" alt="" /></p> </body> </html>