kkw学习css的过程,第7天，2D转换

对我来说，2D转换开始打开了我的新世界的大门。

1、translate() 偏移

元素从当前位置移动，根据给定的x值在平面横向移动，y值平面纵向移动。
x与y的值，可以使用像素也可以使用百分比。可以为负数。
transform: translate(100px, 100px);

2、rotate() 旋转

rotate,给定一个角度可以旋转元素，默认是顺时针方向，角度可以为负数，
transform: rotate(90deg); 旋转90°，元素从水平变为垂直。

3、skew() 反转

元素反转指定的角度，根据x的值与y的值。
transform: skew(30deg,0)
这个值，因为自己的想象空间有点弱的样子，不知道怎么解释了

4、scale() 缩放

transform: scale(2,4);只可以为0或者其他正值了，当值为小数的时候，说明将元素缩小，大于1的时候，将元素放大的倍数。
当有两个的值的是，分别代表对于x方向的缩放与y轴方向。一个值的时候，代表x与y缩放同样的倍数。

5、matrix() 整合方法

可以同时使用上述的方法
transform: matrix()

transform:matrix(0.866,0.5,-0.5,0.866,0,0);官方案例，将元素旋转30°。目前我没有使用过。这个属性。

6、transform-orgin：变化初始位置

变化的初始位置，默认都是从中心点开始的，但是有些时候，我们希望他们从顶点开始，然后就可以用到这个属性，类似设置坐标的原点，对于3D的还有Z轴的的值可以设置。
transform-orgin: 20%,20%; 也可以为负值。
transform-orgin: top,top,也可以用单词的位置来表示。