css - 将 html 元素转换到 z 平面时的像素是什么？

Question

我熟悉使用 position: relative; 和无单位 z-index: 10; 移动东西，z-index 对我来说很有意义无单位的。但是，我刚刚学习了transform，特别是它的translate3d 函数:

transform: translate3d(0px,0px,10px);

我很困惑 translate3d 接受像素作为第三个参数，因为在 z 方向上 没有像素。将 html 元素转换到 z 平面时，像素是什么？为什么它们比无单位值更有用？

Answer 1

正 z 平移的每个像素都会使元素离您更近一个像素(实际上是放大它)，而不会改变该元素相对于其他元素的分层顺序。

z-index (documentation)值是整数值，用于确定不同元素如何相互堆叠。

在translate3d(tx, ty, tz) (documentation) tz 值与 tx 和 ty 值一样，是一个平移矢量，用于在其 z- 内的 3d 空间中移动元素索引层。正的 tz 会将元素移向您，而负的 tz 会将元素移离您。

您可以将 tz z 平面平移视为 scale() (documentation) 的近亲(它使用无单位值，其中“2”是“双倍”):它“缩放”元素并且不影响 z-index 分层顺序。