CSS3-二维变形

特点：所有的二维变形或者叫二维转化都是刷的一下就过去了，没有任何过度效果。

       1.Transform转换属性

       2.Transform方法

       (1)偏移：translate（XY）

X表示水平方向的移动，y表示竖直方向的移动。负值表示往反方向移动。

使用该方法可以实现div元素的水平和垂直方向的居中

*{
    padding:0;
    margin:0;
}
.box{
    width:100px;
    height:100px;
    background:skyblue;
    position:fixed;
    top:50%;
    left:50%;
    Transform:translate(-50px,-50px)
}

      (2)缩放：scale(XY)

X表示放大或缩小元素的宽度，Y表示放大或缩小的高度。

scaleX() 表示只对元素的宽度进行缩放

scaleY() 表示只对元素的高度进行缩放

当里面的值为负值的时候，是先把元素进行翻转，然后再执行对元素的缩放操作。

(3)旋转：rotate(Xdeg)  

当里面的值为正的时候，元素沿顺时针方向旋转，反之逆时针旋转。

(4)倾斜

X表示的元素绕着水平方向倾斜Xdeg，Y表示的元素绕着竖直方向倾斜Ydeg

(5)使用六个值的矩阵：matrix(a、b、c、d、e、f)

比如 matrix(1,0,0,1,50,50)表示将元素向右移动50px，再向下移动50px