特点:所有的二维变形或者叫二维转化都是刷的一下就过去了,没有任何过度效果。
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)
}
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