知识点一：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, |
定义 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 转换元素的透视视图。 |
原文：https://www.cnblogs.com/chengxiao35/p/13543292.html