视频字幕
CSS3的transform属性是现代网页设计中的重要工具，它允许我们对HTML元素进行各种变换操作。transform属性支持2D和3D变换，包括平移、旋转、缩放和倾斜等。变换的一个重要特点是不会影响文档流，元素在页面中的原始位置保持不变，只是视觉效果发生改变。这使得我们可以创建丰富的动画效果而不破坏页面布局。
2D变换包含四个核心属性。首先是translate平移，可以沿X轴和Y轴移动元素，语法为translate(x, y)。其次是rotate旋转，可以按指定角度旋转元素，支持度数和弧度单位。然后是scale缩放，可以按比例放大或缩小元素，scale(1.5, 2)表示水平放大1.5倍，垂直放大2倍。最后是skew倾斜，可以沿X轴或Y轴倾斜元素，创造平行四边形效果。这些属性可以单独使用，也可以组合使用。
让我们通过实战案例来理解2D变换的应用。第一个案例是卡片翻转效果，使用rotateY实现3D翻转视觉效果。第二个案例是按钮悬停动画，组合使用scale和translateY创建按钮放大上浮效果。第三个案例是图片缩放，结合scale和rotate创建动态缩放旋转效果。transform-origin属性非常重要，它决定了变换的基准点，默认是center中心点，也可以设置为top left、bottom right等位置，或使用百分比精确控制。
3D变换引入了第三个维度Z轴，形成了完整的三维坐标系统。X轴控制水平方向，Y轴控制垂直方向，Z轴控制深度方向。perspective透视属性是3D变换的关键，它定义了观察者与Z等于0平面的距离，数值越小透视效果越强烈。transform-style属性决定了元素是在2D平面还是3D空间中变换，preserve-3d值可以保持3D空间效果。与2D变换相比，3D变换增加了深度维度，需要透视效果的支持，能够创建更加复杂和真实的空间变换效果。
3D变换的核心属性扩展了2D变换的功能。translate3d可以在三维空间中移动元素，translateZ专门控制Z轴深度移动。旋转属性包括rotateX、rotateY、rotateZ，分别绕对应轴旋转，创造立体旋转效果。scale3d支持三维缩放，scaleZ控制深度方向的缩放。perspective-origin属性控制透视原点位置，影响3D效果的视觉呈现。backface-visibility属性决定元素背面是否可见，hidden值可以隐藏背面，visible值则显示背面，这在创建翻转效果时非常有用。