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

パンくず

CSS3新要素
2D 3D 変形
transform:rotate

概要

要素の回転を行うtransform:rotateについて説明します

プロパティ名

transform:rotate()
transform:rotateX()
transform:rotateY()
transform:rotateZ()
transform:rotate3d()
※2012/03/26現在、ベンダープリフィックスが必要

内容

要素の表示位置を移動させます

設定値

項目	内容
rotate(x,y)	x=x軸、y=y軸。yは省略可。デフォルトは0 単位はdeg
rotateX(x)	x=x軸単位はdeg
rotateY(y)	y=y軸単位はdeg
rotateZ(z)	z=z軸単位はdeg
rotate3d(x,y,z,angle)	x=x軸,y=y軸,z=z軸,角度 xyzは数値でベクトル指定。angleは角度で単位はdeg

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>transform:rotate</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:rotate(15deg);
  -webkit-transform:rotate(15deg);
  -moz-transform:rotate(15deg);
  -ms-transform:rotate(15deg);
  -o-transform:rotate(15deg);
}
p.container2 img {
  transform: translateX(45deg);
  -webkit-transform:rotateX(45deg);
  -moz-transform:rotateX(45deg);
  -ms-transform:rotateX(45deg);
  -o-transform:rotateX(45deg);
}
p.container3 img {
  transform: translateY(45deg);
  -webkit-transform:rotateY(45deg);
  -moz-transform:rotateY(45deg);
  -ms-transform:rotateY(45deg);
  -o-transform:rotateY(45deg);
}
p.container4 img {
  transform: translateZ(45deg);
  -webkit-transform:rotateZ(45deg);
  -moz-transform:rotateZ(45deg);
  -ms-transform:rotateZ(45deg);
  -o-transform:rotateZ(45deg);
}
p.container5 img {
  transform: translate3d(0.5,0.5,0,45deg);
  -webkit-transform:rotate3d(0.5,0.5,0,45deg);
  -moz-transform:rotate3d(0.5,0.5,0,45deg);
  -ms-transform:rotate3d(0.5,0.5,0,45deg);
  -o-transform:rotate3d(0.5,0.5,0,45deg);
}
    </style>
  </head>
  <body>
  transform:rotate(15deg);
  <p class="container1"><img class="transform-rotate1" src="transform-rotate.png" alt="" /></p>
  transform: rotateX(45deg);
  <p class="container2"><img class="transform-rotate2" src="transform-rotate.png" alt="" /></p>
  transform: rotateY(45deg);
  <p class="container3"><img class="transform-rotate3" src="transform-rotate.png" alt="" /></p>
  transform: rotateZ(45deg);
  <p class="container4"><img class="transform-rotate4" src="transform-rotate.png" alt="" /></p>
  transform: rotate3d(0.5,0.5,0,45deg);
  <p class="container5"><img class="transform-rotate5" src="transform-rotate.png" alt="" /></p>
  </body>
</html>