CSS變形中的xyz軸是指三個方向:x軸、y軸和z軸,它們分別對應著水平方向、垂直方向和3D空間中的深度方向。
transform: translateX(50px); /* 沿x軸正方向平移50像素 */
通過translate函數可以對元素在xyz軸上進行平移。例如,使用translateX函數可以將元素沿x軸正方向平移,語法如下:
transform: translateY(-50%); /* 沿y軸負方向平移50%的元素高度 */
translateY函數則可以將元素沿y軸方向平移。例如,使用translateY函數可以將元素沿y軸負方向平移,語法如下:
transform: translateZ(100px); /* 沿z軸正方向移動100像素 */
translateZ函數可以將元素在3D空間中沿z軸方向移動。例如,使用translateZ函數可以將元素沿z軸正方向移動,語法如下:
transform: translate3d(50px, -50%, 100px); /* 同時平移元素在x、y、z三個方向上 */
translate3d函數可以同時對元素在x、y、z三個方向上進行平移。它的語法如下: