css变换

一、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过度效果