一、css变换的效果
(一)、2D转换
1.transform属性
(1)translate()
将元素水平移动移动移动(根据为 X 轴和 Y 轴指定的参数)
transform: translate(100px, 100px);
(先向右移动100px,再向下移动100px)
按照先x轴再y轴移动,右正左负,下正上负
补充:还有translateX() ,translateY()
(2)rotate()
根据给定的角度顺时针或逆时针旋转元素(负为逆时针,正为顺时针)
transform: rotate(20deg);
(顺时针旋转20度)
(3)scaleX()
增加或减少元素的宽度
transform: scaleX(2);
(宽增加为原来的两倍)
(4)scaleY()
增加或减少元素的高度
transform: scaleY(0.5);
(高变为原来的一半)
(5)scale()
改变元素大小(前一个为宽的倍数,后一个为高的倍数)
transform: scale(2, 2);
(宽*2倍,高*2倍 )
可以为小数倍
(6)skewX()
使元素沿 X 轴倾斜给定角度(实际为y轴倾斜,与x轴平行的不变)
transform: skewX(30deg);
(7)skewY()
使元素沿 Y 轴倾斜给定角度(实际为x轴倾斜,与y轴平行的不变)
transform: skewY(30deg);
(8)skew()
注意:这几个属性以上部不变化的部分为基础顺时针旋转(取值为正)
使元素沿 X 和 Y 轴倾斜给定角度(前面为skewX,后面为skewY)
transform: skew(20deg, 10deg);
(9)matrix()
matrix() 方法把所有 2D 变换方法组合为一个。 matrix() 方法可接受六个参数,其中包括数学函数,这些参数使您可以旋转、缩放、移动(平移) 和倾斜元素。 参数如下:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
(二)、3D转换
1.transform属性
(1)rotateX()
以x为轴旋转给定角度
transform: rotateX(70deg);
(2)rotateY()
以y为轴旋转给定角度
transform: rotateY(100deg);
(3)rotateZ()
以z为轴旋转给定角度(类似中心旋转)
transform:rotateZ(30deg);
transform:rotateZ(140deg);
transform:rotateZ(180deg);
0deg→30deg→140deg→180deg
2、perspective属性
perspective: 100;
其他:
二、css过度效果