CSS转换详解

什么是转换？
转换时改变元素在页面中的大小，位置，形状，角度，的一种方式。转换又分两种一种是2D转换，一种是3D转换。

2D位移
作用
改变元素在x轴y轴上的位置
语法
属性：transform
函数：
transform(x)：改变元素在x轴的位置，取值为正向右移，取值为负向上移
transform(x,y)：改变元素在x轴和y轴上的位置，y：取值为正向下移，取值为负向上移
stranslateX(x)：改变元素在x轴上的位置
stranslateY(y)：改变元素在y轴上的大小

2D缩放
作用
改变元素在x轴y轴上的大小
语法
属性：transform
函数：scale(value)
value为缩放倍数，如果只给一个值，x轴和y轴是等比缩放
取值：
默认值为1,即原始大小
缩小：0到1之间的小数
放大：大于1的数值
负值：以旋转180°的效果显示
scale(x,y)：分别改变元素在x轴y轴上的大小
scale(x)：只有x轴缩放
scale(y)：只有y轴缩放

2D旋转
语法
属性：transform
函数：rotate(ndeg)
n为旋转角度,取值为正，顺时针旋转,取值为负，逆时针旋转
注意
转换原点,旋转围绕着转换原点来做的，所以原点位置不同，转换效果也不同旋转时连同坐标轴也一同