rotate() [旋转]

### 语法
```css
transform: rotate(<angle>);
```

<table class="table"><thead><tr><th width="20%">语法项目</th><th>说明</th></tr></thead><tbody><tr><td>初始值</td><td>0</td></tr><tr><td>适用于</td><td>块元素和行内元素</td></tr><tr><td>可否继承</td><td>否</td></tr><tr><td>单位</td><td>角度值deg，弧度值rad，梯度gard，转/圈turn</td></tr><tr><td>媒介</td><td>视觉</td></tr><tr><td>版本</td><td>CSS3.0</td></tr></tbody></table>

### 说明
rotate()函数能够旋转元素，它主要是在二维空间内进行操作，通过一个角度参数值，来设定旋转的幅度。

如果对元素本身或者元素设置了perspective值，那么rotate3d()函数可以实现一个3维空间内的旋转。

关联属性：<a href="http://www.itshubao.com/doc/css3_animation/4996.html" target="_blank">transform-origin</a>。

### 取值
`rotate(<angle>)`;`<angle>`为一个角度值，单位deg，可以为正数或者负数，正数是顺时针旋转，负数是逆时针旋转。

`rotateX(angele)`,相当于`rotate3d(1,0,0,angle)`指定在3维空间内的X轴旋转

`rotateY(angele)`,相当于`rotate3d(0,1,0,angle)`指定在3维空间内的Y轴旋转

`rotateZ(angele)`,相当于`rotate3d(0,0,1,angle)`指定在3维空间内的Z轴旋转

### 实例代码
<iframe src="http://example.itshubao.com/inexample/428.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>