为何translateZ仅在transition结束后生效？CSS渲染问题排查

架构老林

2026-7-18

问题原因与解决方案

问题原因

这个现象并非浏览器渲染bug，而是浏览器的性能优化策略导致的：

初始状态下.square的opacity: 0，浏览器会判定该元素处于完全不可见状态，因此会跳过其内部子元素（span）的3D变换计算，以此节省渲染资源。
当前过渡仅针对bottom和opacity属性，没有触发3D渲染上下文的实时更新。直到过渡结束、元素完全可见后，浏览器才会重新计算span的translateZ变换，导致文本突然“跳转”到3D位置。

解决方案

以下两种方式均可修复该问题：

方案1：给`.square`添加初始transform并纳入过渡

给.square设置一个初始的3D变换（比如translateZ(0)），并把transform加入过渡属性列表，强制浏览器在过渡过程中维持3D渲染上下文：

.square {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    background-color: blue;
    bottom: 0;
    opacity: 0;
    /* 添加初始3D变换，触发渲染层创建 */
    transform: translateZ(0);
    /* 将transform纳入过渡属性，确保3D上下文实时更新 */
    transition: 500ms bottom, 500ms opacity, 500ms transform;
}

方案2：将perspective移至`.square`元素

把perspective属性从body移到.square上，让子元素的3D变换在父元素渲染时就被计算：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    outline: 1px solid red;
    /* 移除body上的perspective */
}

.square {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    background-color: blue;
    bottom: 0;
    opacity: 0;
    transition: 500ms;
    /* 给父元素设置perspective */
    perspective: 1000px;
    transform-style: preserve-3d;
}