CSS转换

知识点一：css3 2D转换

1、定义：

CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小和位置。

2D变换方法：translate()、rotate()、scale()、skew()、matrix()它们都在transform属性中

2、translate()方法

(1)第一个参数时x轴平移，第二个参数时y轴平移，有正负之分

3、rotate()方法

(1)、只有一个参数，代表度数；

(2)、正数代表顺时针方向，负数代表逆时针方向；

(3)、旋转围绕圆心（默认是中心点）；

(4)、origin属性可以更改旋转的圆心坐标。

4、scale()方法

       (1)第一个值代表x轴缩放，第二个值代表y轴缩放，如果只有一个值代表x轴、y轴同时缩放

(2) origin属性可以更改缩放的圆心坐标。

5、skew()方法

(1)可以传递两个参数，第一个代表x轴的偏移，角度是与y轴的夹角，第二个代表y轴的偏移，角度是与x轴的夹角。

(2)旋转围绕圆心

知识点二：css3 3D转换

1、rotateX()方法

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

2、rotateY()方法

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

3、转换的其他方法

 

 

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。