开发者学堂课程【HTML5 新特性学习：2D 效果】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/396/detail/5056
2D 效果
2D效果:
通过CSS3转换，我们能够对元素进行移动、 缩放、转动、拉长或拉伸。
浏览器支持:
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性 Chrome 和 Safari 需要前缀 -webkit-
Internet Explorer 9需要前缀-ms-
2D 转换:
translate()
rotate()
scale() .
skew()
matrix0
1、2D效果转换
<style>
divf
ma rgin: 30px ;
width: 200px ;
height : 100px ;
backg round-color: aqua ;
transform: rotate (30deg) ; .
-ms-transform: rotate (30deg) ;
-webkit- -transfo rm: rotate(30deg ) ; -moz-transform: rotate (30deg) ;
-0- transform: rotate (30deg) ;]
transfo rm : translate (50px, 100px) ;
-ms-transform: translate (50px, 100px) ; -o-transform: translate (50px, 100px) ;
-webkit- -transform: translate (50px, 100px) ; -moz-transform: translate(50px, 100px) ;l
</style>
</head>
<body>
<div>hello world</div>
2、缩放
t ransform: scale(2,4) ;
-ms-transform: scale(2,4) ;
-webkit- -transform: scale(2,4) ; -o-transform: scale(2,4) ;
-moz-transform: scale(2,4) ;
3、倾斜
t ransform : : skew (30deg, 20deg) ;
-webkit-transform: skew(30deg , 20deg) ;
