CSS3 transform 属性

旋转 div 元素：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    div {
      width: 200px;
      height: 100px;
      background-color: yellow;
      /* Rotate div */
      transform: rotate(7deg);
      -ms-transform: rotate(7deg);
      /* IE 9 */
      -webkit-transform: rotate(7deg);
      /* Safari and Chrome */
    }
  </style>
</head>
<body>

  <div>Hello</div>

</body>
</html>

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性




transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-

属性定义及使用说明

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

为了更好地理解Transform属性,请查看 - 在线实例.

<html>
<!DOCTYPE html>
<html>
<head>
  <style>
    #div1 {
      width: 120px;
      height: 100px;
      background-color: yellow;
      border: 1px solid black;
      transform: rotate(7deg);
      -ms-transform: rotate(7deg);
      /* IE 9 */
      -webkit-transform: rotate(7deg);
      /* Safari and Chrome */
    }
  </style>

  <script>
    function rotate(value) {
      document.getElementById('div1').style.webkitTransform = "rotate(" + value + "deg)";
      document.getElementById('div1').style.msTransform = "rotate(" + value + "deg)";
      document.getElementById('div1').style.MozTransform = "rotate(" + value + "deg)";
      document.getElementById('div1').style.OTransform = "rotate(" + value + "deg)";
      document.getElementById('div1').style.transform = "rotate(" + value + "deg)";
      document.getElementById('span1').innerHTML = value + "deg";
    }
  </script>

</head>
<body>

  <p>Rotate the yellow div element:</p>

  <div id="div1">HELLO</div>

  Rotate: <br>
  <input type="range" min="-360" max="360" value="7" onchange="rotate(this.value)" /><br> transform: rotate(<span id="span1">7deg</span>);

</body>
</html>

尝试一下 »

默认值： none
继承： no
版本： CSS3
JavaScript 语法： object.style.transform="rotate(7deg)"

语法

transform: none|transform-functions;


值 描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

更多实例

旋转图片 - 这个例子演示了如何创建"polaroid"照片和旋转图片。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 30px;
      background-color: #E9E9E9;
    }

    div.polaroid {
      width: 294px;
      padding: 10px 10px 20px 10px;
      border: 1px solid #BFBFBF;
      background-color: white;
      /* Add box-shadow */
      box-shadow: 2px 2px 3px #aaaaaa;
    }

    div.rotate_left {
      float: left;
      -ms-transform: rotate(7deg);
      /* IE 9 */
      -webkit-transform: rotate(7deg);
      /* Safari and Chrome */
      transform: rotate(7deg);
    }

    div.rotate_right {
      float: left;
      -ms-transform: rotate(-8deg);
      /* IE 9 */
      -webkit-transform: rotate(-8deg);
      /* Safari and Chrome */
      transform: rotate(-8deg);
    }
  </style>
</head>
<body>

  <div class="polaroid rotate_left">
    <img src="/examples/pulpitrock.jpg" alt="" width="284" height="213">
    <p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
  </div>

  <div class="polaroid rotate_right">
    <img src="/examples/cinqueterre.jpg" alt="" width="284" height="213">
    <p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
  </div>

</body>
</html>

尝试一下 »