为了更好地理解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>
        