css 3d

 

在CSS中，虽然我们没有直接命名为“xyz轴”的单一属性或函数，但三维变换（如平移、旋转和缩放）是在一个三维空间中进行的，这个空间通常被想象为具有x、y和z三个轴。这些轴共同定义了一个坐标系，允许我们控制元素在三维空间中的位置和方向。

X轴：水平方向，通常从左到右。
Y轴：垂直方向，通常从上到下（在大多数布局中）。
Z轴：垂直于屏幕的方向，通常指向用户（正向）或远离用户（负向）。
在CSS中，使用transform属性可以控制元素沿这些轴进行变换。这里有一些例子说明如何使用transform属性与xyz轴相关的方法：

平移（Translate）
沿X轴平移：transform: translateX(50px); —— 元素将向右移动50像素。
沿Y轴平移：transform: translateY(100px); —— 元素将向下移动100像素。
沿Z轴平移：transform: translateZ(200px); —— 元素将“向前”移动（或变大，因为更接近视图）200像素，这需要有透视（perspective）效果才能明显看到。
旋转（Rotate）
绕X轴旋转：transform: rotateX(45deg); —— 元素将绕X轴旋转45度。
绕Y轴旋转：transform: rotateY(45deg); —— 元素将绕Y轴旋转45度。
绕Z轴旋转：transform: rotate(45deg); 或 transform: rotateZ(45deg); —— 元素将绕Z轴（或默认旋转轴）旋转45度。
缩放（Scale）
沿X轴缩放：transform: scaleX(2); —— 元素在X轴方向上的尺寸将变为原来的两倍。
沿Y轴缩放：transform: scaleY(0.5); —— 元素在Y轴方向上的尺寸将变为原来的一半。
沿Z轴缩放（这实际上对视觉效果的直接影响不大，但在3D变换中可能会影响子元素的缩放）：transform: scaleZ(2); —— 注意，scaleZ()不是CSS的一个标准属性，但在某些环境中（如WebGL）或CSS扩展中可能使用类似的概念。在CSS 3D变换中，通常使用scale(sx, sy, sz)，其中sz是Z轴的缩放因子。
最后，重要的是要记住，要使3D变换效果可见，通常需要将transform-style设置为preserve-3d（在父元素上），并且父元素或其某个祖先元素需要有perspective属性来定义观察点与屏幕之间的距离，从而产生透视效果。