CSS动画&变形-旋转

CSS3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前要大段JavaScript才能实现的功能。CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。

借助于位移、旋转、缩放、倾斜这4钟几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。

比transition动画功能更强大的是animation动画，animation动画同样可以和位移、旋转、缩放、倾斜这4种几何变换结合，但它可以指定多个关键帧，从而允许定义更加丰富的自定义动画。

CSS3动画----transform变形

transform：该属性用于设置变形，该属性支持一个或多个变形函数。

rotate(angle)：该函数用于设置元素旋转的度数。

例如：transform：rotate(30deg);

skew(sx,yx)：该函数用于设置元素的一个扭曲效果。

例如：transform:skew(10deg,20deg);

scale(sx,xy)：该函数用于设置元素的缩放效果。

translate(tx,ty)：该函数同于设置元素的位移。

matrix(m11,m12,m21,m22,dx,dy)：该函数是一个基于矩阵变换的函数。前面的4个参数将组成变形矩阵，后面的dx,dy主要是指在坐标轴上的一个偏移量。

01变形--旋转 rotate()

rotate()旋转：旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度，用来指定旋转的幅度。

如果这个值为正值，元素相对原点中心顺时针旋转；

如果这个值为负值，元素相对原点中心逆时针旋转。

用法：transform：rotate(-30deg)；