Tbpgr Blog

Recruiting Operations tbpgr(てぃーびー) のブログ

CSS3新要素 | 2D 3D 変形 | transform:skew

パンくず

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>

完成画面のキャプチャ