CSS 变换

**CSS 变换**模块定义了如何使用 CSS 设置样式的元素可以在二维或三维空间中进行变换。

CSS 变换实战

使用下方框架中的滑块修改立方体在 3D 空间中的平移、旋转、缩放和倾斜 CSS 变换属性。当您在 3D 空间中移动立方体时，请注意它与标记为 z:0px 的元素的交互方式，该元素位于 3D 位置 (0, 0, 0)。

您还可以使用 perspective 滑块修改立方体容器的 perspective 属性，该属性确定您与 z=0 平面的距离。

perspective-origin 滑块确定您（观察者）在 3D 空间中观察的位置，用于确定视图的消失点。这个消失点由一个小红点表示。您可以想象修改这些滑块就像物理上上下左右移动头部，以查看立方体的不同部分，而无需移动立方体本身。

backface-visibility 复选框确定立方体的背面是否设置为 visible 或 hidden。

上面示例中的立方体由六个 <div> 元素组成，所有这些元素都使用 CSS 设置样式以创建立方体的面。立方体不是使用 2D 或 3D 画布上下文绘制的，因此**您可以使用浏览器的开发者工具检查立方体的面，就像检查任何其他 DOM 元素一样**。尝试使用浏览器的开发者工具元素选择器在变换立方体的位置和旋转时检查立方体的不同面。

**注意：**应用变换（包括 3D 旋转）的顺序会影响最终变换的结果。在上面的示例中，变换按平移、缩放、旋转，然后倾斜的顺序进行。旋转按 X → Y → Z 的顺序应用。

您可以在 GitHub 上查看此示例的源代码。