CSS3二维变形

CSS3二维变形

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

1、Transform转换属性

transform

2、Transform 方法

（1）偏移：translate(x,y)

X表示水平方向的移动，y表示竖直方向的移动。负值表示往反方向移动。
transform: translate(890px,200px);//偏移
使用该方法，可以实现 元素的 水平和垂直方向的居中

.box{
    width: 100px;
    height: 100px;
    border: 1px solid grey;
    position: fixed;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}

translateX ==translate(x,0)，translateY==translate(0,y)

（2）缩放:scale(x,y)

X表示放大或者缩小元素的宽度，Y表示的是放大或者缩小元素的高度。
scaleX()表示只对元素宽度进行缩放；scaleY()表示只对元素高度进行缩放。
当里面的值为负值的时候，是先把元素进行了翻转，然后在对元素进行缩放操作；当里面的值在（0-1）的时候缩小；当里面的值大于1的时候是放大。

transform:scale(-1);//缩放

（3）旋转:rotate（Xdeg）–了解即可

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

transform:rotate(-60deg);//旋转

（4）倾斜:skew(Xdeg,Ydeg)–了解即可

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

transform:skew(20deg,20deg);//倾斜

（5）使用六个值的矩阵: matrix(a,b,c,d,e,f)–了解即可

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

transform:matrix(1,0,0,1,400,50);