1. 2D变换
在CSS3中，transform属性可以用于对元素进行2D变换，包括旋转、缩放、平移和倾斜等操作。
下面我们来详细介绍一下transform属性的用法。
1.1 旋转
通过transform的rotate函数可以实现元素的旋转效果。
transform: rotate(45deg);
rotate函数接受一个参数，参数为旋转的角度，单位可以是deg（度）或rad（弧度）。正值表示顺时针旋转，负值表示逆时针旋转。
1.2 缩放
通过transform的scale函数可以实现元素的缩放效果。
transform: scale(0.8);
scale函数接受一个参数，参数为缩放的倍数。大于1的值表示放大，小于1的值表示缩小。
1.3 平移
通过transform的translate函数可以实现元素的平移效果。
transform: translate(50px, 100px);
translate函数接受两个参数，分别表示元素在水平和垂直方向上的平移距离。参数可以是长度值（如px、em等）或百分比。
1.4 倾斜
通过transform的skew函数可以实现元素的倾斜效果。
transform: skew(30deg, 45deg);
skew函数接受两个参数，分别表示元素在水平和垂直方向上的倾斜角度。
2. 3D变换
CSS3中的transform属性还可以实现3D变换，可以在三维空间中对元素进行操作，更加灵活多样。
2.1 旋转
通过transform的rotateX、rotateY和rotateZ函数可以分别实现绕X轴、Y轴和Z轴的旋转效果。
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
这三个函数接受一个参数，参数为旋转的角度。
2.2 缩放
通过transform的scaleX、scaleY和scaleZ函数可以分别实现在X轴、Y轴和Z轴上的缩放效果。
transform: scaleX(0.8);
transform: scaleY(0.8);
transform: scaleZ(0.8);
这三个函数接受一个参数，参数为缩放的倍数。
2.3 平移
通过transform的translateX、translateY和translateZ函数可以分别实现在X轴、Y轴和Z轴上的平移效果。
transform: translateX(50px);
transform: translateY(50px);
transform: translateZ(50px);
这三个函数接受一个参数，参数为平移的距离。
2.4 倾斜
通过transform的skewX、skewY和skewZ函数可以分别实现围绕X轴、Y轴和Z轴的斜切效果。
transform: skewX(30deg);
transform: skewY(30deg);
transform: skewZ(30deg);
这三个函数接受一个参数，参数为斜切角度。
总结
CSS3中的transform属性是实现2D和3D变换的重要属性，可以通过rotate、scale、translate和skew等函数来快速实现元素的旋转、缩放、平移和倾斜等效果。
2D变换主要作用于元素在平面上的变换，通过rotate、scale、translate和skew函数的单一或组合使用，可以实现各种不同的动画效果。
而3D变换则可以在三维空间中对元素进行更加自由和灵活的操作，通过rotateX、rotateY、rotateZ等函数的灵活组合，可以实现更加逼真的立体动画效果。