CSS提供了多种方式来实现2D变换效果，包括平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew），这些变换可以分别应用于元素的位置、角度、大小和形状。其中，平移和旋转是最常见的变换效果。
平移可以改变元素的位置，语法格式如下：
transform: translate(x,y);
其中，x和y分别表示水平和垂直方向的偏移量，可以使用px、em、%等单位。
旋转可以改变元素的角度，语法格式如下：
transform: rotate(angle);
其中，angle表示旋转的角度，可以使用deg、rad等单位。
缩放可以改变元素的大小，语法格式如下：
transform: scale(x,y);
其中，x和y分别表示水平和垂直方向的缩放比例，如果只设置一个值，另一个值默认为相同的值。
倾斜可以改变元素的形状，语法格式如下：
transform: skew(x-angle,y-angle);
其中，x-angle和y-angle分别表示水平和垂直方向的倾斜角度，可以使用deg、rad等单位。
CSS也提供了多种方式来实现3D变换效果，包括旋转、平移、缩放和透视等，可以让元素在三维空间中自由移动和变形。
在3D空间中，元素的旋转有三个轴线：X轴、Y轴和Z轴。语法格式如下：
transform: rotateX(angle); transform: rotateY(angle); transform: rotateZ(angle);
其中，angle表示旋转的角度，可以使用deg、rad等单位。
在3D空间中，元素的平移可以沿着X、Y、Z三个轴线进行，语法格式如下：
transform: translateX(distance); transform: translateY(distance); transform: translateZ(distance);
其中，distance表示平移的距离，可以使用px、em、%等单位。
在3D空间中，元素的缩放可以沿着X、Y、Z三个轴线进行，语法格式如下：
transform: scaleX(factor); transform: scaleY(factor); transform: scaleZ(factor);
其中，factor表示缩放的比例，如果只设置一个值，另外两个值默认为1。
透视可以让元素在3D空间中产生近大远小的效果，语法格式如下：
perspective(distance);
其中，distance表示观察者与元素之间的距离，可以使用px、em、%等单位。