案例：CSS3案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
.animated_div
6
    {
7
    width:60px;
8
    height:40px;
9
    color:#ffffff;
10
    position:relative;
11
    font-weight:bold;
12
    padding:20px 10px 0px 10px;
13
    float:left;
14
    margin:20px;
15
    margin-right:50px;
16
    border:1px solid #888888;
17
    -webkit-border-radius:5px;
18
    -moz-border-radius:5px;
19
    border-radius:5px;
20
    font:12px Verdana, Arial, Helvetica, sans-serif;
21
    text-align:center;
22
    vertical-align:middle;
23
    }
24
​
25
#div1 {background:#92B901;transform:rotate(30deg);-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);-moz-transform:rotate(30deg);}
26
#div2 {background:#f98450;transform:scale(2,2);-webkit-transform:scale(2,2);-o-transform:scale(2,2);-moz-transform:scale(2,2);}
27
#div3 {background:#1ec7e6;transform:skew(30deg,20deg);-webkit-transform:skew(30deg,20deg);-o-transform:skew(30deg,20deg);-moz-transform:skew(30deg,20deg);}
28
​
29
#div1 {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844384, M12=-0.5000000000000004, M21=0.5000000000000004, M22=0.8660254037844384, SizingMethod=auto expand)";}
30
#div2 {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=2, M12=0, M21=0, M22=2, SizingMethod=auto expand)";}
31
#div3 {-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.5773502691896265, M21=0.3639702342662022, M22=1, SizingMethod=auto expand)";}
32
33
34
#rotate1,#rotatey1
35
    {
36
    border:1px solid #000000;
37
    background:red;
38
    margin:10px;
39
    opacity:0.7;
40
    }
41
</style>
42
​
43
<script>
44
<!--
45
var x,y,n=0,ny=0,rotINT,rotYINT
46
function rotateDIV()
47
{
48
x=document.getElementById("rotate1")