css记录：三维变换之transform

CSS 的 transform 属性用于对元素进行 2D 或 3D 转换。这些转换包括旋转、缩放、倾斜和移动等。在 3D 变换中，我们可以创建更为复杂和动态的效果，让用户体验更为丰富。

transform 属性

transform 是一个简写属性，用于设置以下 2D 和 3D 转换函数：

rotate()：2D 旋转
rotateX()、rotateY()、rotateZ() 或 rotate3d()：3D 旋转
scale()：2D 缩放
scaleX()、scaleY()、scaleZ() 或 scale3d()：3D 缩放
skew()：2D 倾斜
skewX()、skewY()：3D 倾斜（但注意，skewZ() 实际上不会创建 3D 效果，因为它只是沿着 Z 轴倾斜元素，但这在 2D 渲染中是不可见的）
translate()：2D 位移
translateX()、translateY()、translateZ() 或 translate3d()：3D 位移
matrix()：定义 2D 转换，使用六个值的矩阵
matrix3d()：定义 3D 转换，使用 16 个值的 4x4 矩阵

3D 变换的注意事项

透视 (perspective)：为了看到 3D 效果，需要设置元素的透视值。这可以通过在其父元素上设置 perspective 属性来实现。透视值定义了观察者与 Z=0 平面的距离，使元素具有 3D 空间感。
转换样式 (transform-style)：当元素有子元素并希望这些子元素也在 3D 空间中转换时，需要将父元素的 transform-style 设置为 preserve-3d。
反面可见性 (backface-visibility)：默认情况下，当元素旋转到其背面时，该背面是不可见的。可以通过设置 backface-visibility: visible; 来使其可见。

示例

下面是一个简单的 3D 立方体示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Cube</title>
<style>.cube {position: relative;width: 200px;transform-style: preserve-3d;animation: spin 5s infinite linear;}.face {position: absolute;width: 200px;height: 200px;border: 1px solid #ccc;background-color: rgba(255,255,255,0.8);}.front  { transform: translateZ(100px); }.back   { transform: rotateY(180deg) translateZ(100px); }.left   { transform: rotateY(-90deg) translateZ(100px); }.right  { transform: rotateY(90deg) translateZ(100px); }.top    { transform: rotateX(90deg) translateZ(100px); }.bottom { transform: rotateX(-90deg) translateZ(100px); }@keyframes spin {from { transform: rotateY(0deg); }to   { transform: rotateY(1turn); }}
</style>
</head>
<body><div class="cube"><div class="face front">Front</div><div class="face back">Back</div><div class="face left">Left</div><div class="face right">Right</div><div class="face top">Top</div><div class="face bottom">Bottom</div>
</div></body>
</html>