CSS3 transform变换（2D+3D）

CSS3的transform属性可以实现2D和3D变换，包括旋转、缩放、移动、倾斜等。以下是一些使用transform属性的示例代码：

2D变换示例：

/* 旋转45度 */
.rotate {
  transform: rotate(45deg);
}
 
/* 沿X轴缩放1.5倍 */
.scaleX {
  transform: scaleX(1.5);
}
 
/* 沿Y轴缩放0.8倍 */
.scaleY {
  transform: scaleY(0.8);
}
 
/* 向右移动30像素 */
.translateX {
  transform: translateX(30px);
}
 
/* 向上移动20像素 */
.translateY {
  transform: translateY(20px);
}
 
/* 倾斜30度 */
.skew {
  transform: skew(30deg);
}

3D变换示例：

/* 沿X轴旋转30度 */
.rotateX {
  transform: rotateX(30deg);
}
 
/* 沿Y轴旋转45度 */
.rotateY {
  transform: rotateY(45deg);
}
 
/* 沿Z轴旋转60度 */
.rotateZ {
  transform: rotateZ(60deg);
}
 
/* 沿X轴缩放1.2倍 */
.scale3dX {
  transform: scale3d(1.2, 1, 1);
}
 
/* 沿Y轴缩放0.8倍 */
.scale3dY {
  transform: scale3d(1, 0.8, 1);
}
 
/* 沿Z轴缩放0.9倍 */
.scale3dZ {
  transform: scale3d(1, 1, 0.9);
}
 
/* 沿Z轴移动50像素 */
.translateZ {
  transform: translateZ(50px);
}
 
/* 透视效果，z远离屏幕时内容看起来更大 */
.perspective {
  perspective: 500px;
}

这些示例展示了如何使用CSS3的transform属性进行2D和3D变换。在实际应用中，可以根据具体需求组合和使用这些变换函数。