《CSS 3D 变形探秘：开启网页设计新维度》
一、移动：精确控制元素位置
translate函数为我们提供了强大的移动能力。可以沿 x 轴、y 轴甚至 z 轴来调整元素的位置。无论是简单地在平面上平移，还是在三维空间中进行精准定位，translate都能轻松胜任。它让元素的布局更加灵活多变，为设计师提供了无限的创意空间。
translate(tx[,ty]:沿x轴移动tx距离，沿y轴移动ty的距离
ty可以省略，如果省略则ty默认为0
ranslate(tx,ty,tz]:沿x轴移动tx距离，沿y轴移动ty的距离
ty可以省略，如果省略则ty默认为0,tz是距离眼睛的方向
translate(tx）沿x轴tx距离
translate(ty）沿y轴ty距离
translate(tz）沿z轴tz距离
二、缩放：调整元素大小的艺术
transform scale(sx,sy)表示html元素沿x轴的缩放比为sx，沿y轴的缩放比为sy，如果sy省略，默认sy=sx
transform scale(sx,sy，sz)表示html元素沿x轴的缩放比为sx，沿y轴的缩放比为sy，沿z轴是z如果sy省略，默认sy=sx
transform scale(sx)表示html元素沿x轴的缩放比为sx
transform scale(sy)表示html元素沿y轴的缩放比为sy
transform scale(sz)表示html元素沿z轴的缩放比为sz
transform scale允许我们对元素进行缩放操作。可以分别控制 x 轴、y 轴和 z 轴的缩放比例，实现不同方向的拉伸或压缩。这不仅可以用来突出重点内容，还能创造出独特的视觉效果。想象一下，一个巨大的标题在页面上引人注目，或者一个微小的图标在角落里若隐若现。
三、旋转：赋予元素动感
rotate(angle) html绕z轴旋转angle
rotateX(angle) html绕x轴旋转angle
rotateY(angle) html绕y轴旋转angle
通过rotate、rotateX和rotateY，我们可以让元素围绕不同的轴进行旋转。这为网页增添了动态感和立体感。一个旋转的图标可以吸引用户的注意力，一个 3D 模型的旋转展示则能让用户更好地观察其各个角度。
四、倾斜：创造独特视角
skew(xAngle[,yxAngle])html沿x轴倾斜xAngle角度，沿y倾斜yAngle角度,y如果没有默认为0
skew(xAngle)html沿x轴倾斜xAngle角度
skew(yAngle)html沿x轴倾斜yAngle角度
skew函数可以使元素沿 x 轴或 y 轴倾斜，为设计带来独特的视角效果。它可以用来模拟物体的倾斜、倒影等效果，增加页面的趣味性和艺术感。
五、设置变形中心点：掌控变形的关键
tarnform-origin 设置变形中心点 属性值可以是百分比，px具体的值，也可以是top bottom
tarnform-origin属性让我们能够设置元素变形的中心点。通过调整这个中心点，可以改变元素在进行移动、旋转、缩放等变形时的基准点。这使得我们可以更加精确地控制变形效果，实现更加复杂和精美的设计。
六、3D 嵌套效果：构建复杂的 3D 结构
transform-style属性决定了子元素是否呈现正确的 3D 关系。当设置为preserve-3d时，子元素可以保留 3D 位置，从而可以构建出复杂的 3D 结构。这为设计师提供了更多的可能性，可以创造出令人惊叹的 3D 场景。
八、3D 背面可见性：控制视觉效果
backface-visibility属性可以控制元素背面的可见性。当设置为hidden时，背面被隐藏，使得页面更加整洁和专业。而设置为visible时，则可以创造出一些特殊的效果，如双面显示的元素。