css 2D transform 实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css 2D transform 实例 - 自学教程(runoops.com)</title>
    <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>

</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>