css3 Transform

1、Transform转换属性

所有的二维变形（转化），都是刷的一声就变过去了，没有任何效果

2、Transform 方法

（1）转换：translate（x,y）

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

使用该方法，可以实现水平居中

        #div{
            width: 100px;
            height: 100px;
            background: hotpink;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

 

（2）缩放:scale

x表示放大或者缩小元素的宽度，y表示放大或者缩小元素的高度。

当值为负数时，网页把元素进行了翻转然后进行了缩放操作

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

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

transform: scale(1.2);
transform: scaleX(1.2);
transform: scaleY(1.2);

 

（3）旋转:rotate（Xdeg）了解就可以

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

（4）倾斜:skew(Xdeg，Ydeg)了解就可以

X表现的元素绕着水平方向倾斜Xdeg，Y表示的元素绕着垂直方向倾斜Ydeg,负值相反

（5）使用六个值的矩阵: matrix

matrix（a,b,c,d,e,f）

比如matrix（1,0,0,1,50,50），表示将元素向右移动50px，在向下移动50px