关于HTML5的CSS样式之2D转换

变形属性：transform

可以实现元素的位移、拉伸或者旋转等效果

2D

2D变换，是在一个平面对元素进行的操作。
可以对元素进行水平或者垂直位移、旋转或者拉伸

变形属性：transform的所有属性值

1、transform：none;默认值
2、transform：translate（）；移动 平移 单位是px
3、transform：rotate（）；旋转 单位是deg deg度数
4、transform：scale（）；缩放 没有单位 默认值是1
5、transform：skew（）；倾斜 单位是deg
6、transform：matrix（）；矩阵
7、transform：perspective（）；景深 视距 单位是px

确定坐标系

.默认状态下，x轴是水平的，向右为正。
.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。

transform:translate()移动

属性值： translateX()：水平移动 translateY()：垂直移动

缩写：
1.transform:translateX(像素值) translateY(像素值)；
2.transform:translate(X轴像素值，Y轴像素值);

注意：在和旋转，缩放等属性值一起用时，变形属性值放在前面会改变它的轴方向，所以要把移动的属性值放在前面才不受影响。

transform:rotate()旋转

属性值：rotateX()：水平旋转 rotateY()：垂直移动
缩写：transform:rotateX(X轴像素值) rotateY(Y轴像素值)；
注意：旋转rotate只有一种缩写，要和translate区分开

transform:scale()缩放

属性值：scale()：值趋于0~1，大于1是放大，小于1是缩小

可以改变基点的位置，来实现缩放的方向

基点transform-origin属性

可以改变变换的方向

属性值：可以写一个或两个（不写默认是中心点） 例如：transform-origin:top;表示基点变成上边
transform-origin:bottom left;表示基点变成左下方

如何理解基点呢？
举个例子：
写一个div 宽度为2px高度60px,让它沿X轴旋转90度，css属性就是transform:rotateX(90deg)
不写基点位置的默认是从中间旋转的，旋转后它看起来就是高度为0px了
加上基点transform-origin:bottom；这样它是把X轴移到div的底部开始旋转，旋转后看起来的高度就是30px
画个图展示一下它加基点的变化