scaleZ() - Z 轴缩放

控制元素在 3D 空间中的深度缩放

什么是 scaleZ()？

scaleZ() 函数沿 Z 轴缩放元素。

⚠️ 重要：单独使用 scaleZ() 看不到效果，必须配合其他 3D 变换（如 rotateX/Y）才能观察到变化。

语法说明

transform: scaleZ(number);
  • number - 缩放倍数（无单位）
  • scaleZ(1)：正常深度（默认）
  • scaleZ(2)：深度拉伸 2 倍
  • scaleZ(0.5)：深度压缩为一半

示例：3D 立方体对比

悬停立方体查看 3D 效果，注意观察深度的区别

正常立方体 (scaleZ(1))

前
后
右
左
上
下

拉伸立方体 (scaleZ(2))

前
后
右
左
上
下
/* scaleZ() 必须配合 3D 旋转才能看到效果 */
.cube {
    transform-style: preserve-3d;
    transform: scaleZ(2) rotateX(45deg) rotateY(45deg);
}

/* 立方体的前后面距离会被拉伸 2 倍 */
.front  { transform: translateZ(75px); }
.back   { transform: rotateY(180deg) translateZ(75px); }

重要说明

  • 单独使用无效：scaleZ() 必须配合 rotateX/Y 等 3D 变换才能看到效果
  • 作用原理：改变元素在 Z 轴上的深度，影响 translateZ 的实际距离
  • 实际应用：创建 3D 立方体、3D 文字效果等

⚠️ 为什么单独使用看不到效果？

  • scaleZ() 只改变 Z 轴的缩放，不改变 X、Y 轴
  • 如果元素没有在 Z 轴上旋转，从正面看深度变化是看不见的
  • 就像从正面看一张纸，无论纸多厚都看不出来
  • 必须旋转元素（rotateX/Y）才能看到深度的变化

实际应用

/* 3D 文字效果 */
.text-3d {
    transform-style: preserve-3d;
    transform: scaleZ(3) rotateX(60deg) rotateY(30deg);
}

/* 3D 按钮 */
.button-3d {
    transform: scaleZ(2) rotateX(10deg);
    transition: transform 0.3s;
}

.button-3d:hover {
    transform: scaleZ(3) rotateX(15deg);
}