transform [变形基础]

### 语法
```css
transform: none | <transform-function>[<transform-function>]*
```
<table class="table"><thead><tr><th width="20%">语法项目</th><th>说明</th></tr></thead><tbody><tr><td>初始值</td><td>none</td></tr><tr><td>适用于</td><td>块元素和行内元素</td></tr><tr><td>可否继承</td><td>否</td></tr><tr><td>媒介</td><td>视觉</td></tr><tr><td>版本</td><td>CSS3.0</td></tr></tbody></table>

### 说明
transform属性能对元素对象进行变形操作，主要包括以下几种：旋转rotate、缩放scale、移动translate、倾斜skew以及矩阵变形matrix。

### 取值

- `none`：表示不进行变换；
- `<transform-function>`：表示一个或多个变换函数，以空格分开，因此可以同时对一个元素进行transform的多种属性操作。
 - `rotate(<angle>)`：旋转元素
 - `scale(<number>[, <number>])`：缩放元素
 - `translate(<translation-value>[, <translation-value>])`：移动元素
 - `skew(<angle> [,<angle>])`：倾斜元素
 - `matrix(<number>,<number>,<number>,<number>,<number>,<number>)`：矩阵变形
 - `perspective(length)`：透视

示例：

transform:rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);

### 实例代码
鼠标经过变大1.2倍、旋转360度并改变背景色。
<iframe src="http://example.itshubao.com/inexample/427.html" width="100%" height="300px" frameborder="0" scrolling="no"></iframe>

### 兼容性
<table class="table"><thead><tr><th class="ie" width="20%">IE</th><th class="firefox" width="20%">Firefox</th><th class="opera" width="20%">Opera</th><th class="safari" width="20%">Safari</th><th class="chrome" width="20%">Chrome</th></tr></thead><tbody><tr><td>IE 10+</td><td>Firefox 3.5+</td><td>Opera 11.50+</td><td>Safari 10+</td><td>Chrome 2.0+</td></tr></tbody></table>