CSS3 2D transform一些属性测试实例页面

CSS代码：

.trans_box { 
    display:inline-block; 
    margin:10px; 
    padding:20px 10px; 
    border:1px solid #beceeb; 
    background-color:#f0f3f9; 
}
.trans_skew { ... transform: skew(35deg); }
.trans_scale { ... transform:scale(1,0.5); }
.trans_rotate { ... transform:rotate(45deg); }
.trans_translate { ... transform:translate(10px, 20px); }
.trans_rotate_skew_scale_translate {
    ...
    transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}
                

HTML代码：

<span class="trans_box trans_skew">transform: skew(35deg);</span>
<span class="trans_box trans_scale">transform:scale(1,0.5);</span>
<span class="trans_box trans_rotate">transform:rotate(45deg);</span>
<span class="trans_box trans_translate">transform:translate(10px, 20px);</span>
<span class="trans_box trans_rotate_skew_scale_translate">transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);</span>