css转换、旋转、缩放、倾斜

1.转换Transform（2D转换）
css3中的转换允许我们对元素进行***旋转、缩放、移动或倾斜***。它分为2D转换和3D转换。
css2时代，如果要做一些图片转换角度，都依赖于图片、flash或Javascript才能完成。但是现在借助css3就可以轻松倾斜、缩放、移动以及翻转元素。通过css3变形，可以让元素生成静态视觉效果，但也可以很容易结合css3的transition和动画画keyframe产生一些动画效果。
（1）转换
使元素在形状上或者位置发生一定的改变
属性：transform：；
位移：transform:translate(x,y)
当只取一个值，代表水平方向，两个值，代表水平方向和垂直方向，右下为正，可取负值
transform:translateX（）；水平方向位移
transform:translateY（）；垂直方向位移
（2）旋转
transform：rotate（deg）
取正值，顺时针旋转，负值，逆时针旋转
旋转会旋转整个坐标轴
默认旋转中心点为宽高的一半
transform：rotateX（deg）
transform：rotateY（deg）

transform-origin:; 设置旋转的中心点

（3）缩放
transform:scale(x,y);
默认值 1
取值0-1 缩小
>1 放大
当取值为一个时，等比例缩放，两个值代表水平和垂直
transform:scaleX();
transform:scaleY();

（4）倾斜
transform：skew(xdeg,ydeg)
取一个值代表水平方向
两个值代表水平和垂直