2D效果：通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
浏览器支持：Internet Explorer1O、Firefox以及Opera支持transform属性,Chrome和Safari需要前缀-webkit-,Internet Explorer9需要前缀-ms-
2D转换：translate(),rotate(),scale(),skew(),matrix()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width:200px;
height: 100px;
margin:100px auto;
line-height: 100px;
background-color: skyblue;
/* transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg); */
/* transform:translate(300px,100px);
-ms-transform:translate(300px,100px);
-moz-transform:translate(300px,100px);
webkit-transform:translate(300px,100px);
-o-transform:translate(300px,100px); */
/* transform:scale(2,4);
-ms-transform:scale(2,4);
-moz-transform:scale(2,4);
-webkit-transform:scale(2,4);
-o-transform:scale(2,4); */
transform: skew(30deg,20deg);
-webkit-transform: skew(30deg,20deg);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>