了解变换原点中的 z 偏移

Question

我正在尝试研究变换原点属性以及该属性的工作原理。我做了一个小演示HERE。

HTML：

<div class="section-title">
        <span data-hover="Product Range">Product Range</span>
    </div>

CSS：

.section-title {
                text-align: center;
                margin: 50px 0px;
                color: #FFF;
                text-transform: uppercase;
                perspective: 1000px;
            }

            .section-title span {
                font-size: 2em;
                position: relative;
                display: inline-block;
                padding: 0px 14px;
                background: #2195DE none repeat scroll 0% 0%;
                transition: transform .3s ease 0s;
                transform-origin: 50% 0px 0px;
                transform-style: preserve-3d;
            }

            .section-title span::before {
                position: absolute;
                top: 100%;
                left: 0px;
                width: 100%;
                height: 100%;
                background: #0965A0 none repeat scroll 0% 0%;
                content: attr(data-hover);
                transition: #000 .3s ease 0s;
                transform: rotateX(-90deg);
                transform-origin: 50% 0;
                text-align: center;
            }

            .section-title span:hover, .section-title span:focus {
                transform: rotateX(90deg) translateY(-22px);
            }

            .section-title span:hover::before, .section-title span:focus::before {
                background: #28A2EE none repeat scroll 0% 0%;
            }

现在，如果您查看 transform-origin 属性，它在样式表中具有以下定义：

transform-origin: 50% 0 0;

我改成：

transform-origin: 50% 0;

并没有看到任何区别。我的问题是了解 transform-origin 属性中的 z 轴属性值以及没有它的 视觉差异。

MDN 对 z 轴属性的定义如下：

z 偏移::

是 a 无效）描述 z=0 原点距离用户眼睛的距离。

但尽管有定义，但我无法理解或重新创建任何这样的示例，其中 z 偏移会产生任何视觉差异。

这里有人可以帮我理解tranform-origin 中的 z 偏移量有什么意义吗？有人可以提供z偏移量的视觉示例吗？

Answer 1

首先，transition-origin 的 z-offset 值仅适用于 3D 变换。幸运的是，您的小提琴中有一个，但您尝试的唯一值似乎是零（默认值）；不输入值与输入 0 相同，默认值。将其视为与z-index 相同的原理：您是在告诉它它需要离屏幕多近。

有一个重要的警告：z-offset 中的值与z-index（以及translateZ）相反。更高的z-index 会使项目更靠近屏幕（因为堆叠上下文从 0 开始，更高的堆叠级别会让您更靠近屏幕），但 更高 z-offset 会移动元素的原点更远（因为z-offset 描述元素的transform-origin 应该有多远，更高的 z 偏移值 = 更远）。

因此，要理解 3D 图形，请从直接向我们移动的 z 轴射线的角度考虑这些轴。

查看此图，将 z 偏移量设置为 -38px 会将元素的变换原点移近一点。相反，38px 的 z 偏移会将变换原点移动得更远一些。

然而，在这个例子中，span 元素已经沿 X 轴旋转了 -80 度（我选择了 80 而不是 90，以便您可以更容易地看到旋转）。这是首先完成的，因为 3D 变换是累积的，所以每个变换都是按顺序逐步完成的（这也意味着父级的变换由其子级继承）。真的，上面的图表现在也可以被认为是旋转的，z 轴射线指向下方，y 轴射线指向远离我们。

让我们以您的示例为例，将附加面的 z-offset 更改为 -38px（最初可见的面的长度（其高度，以 CSS 术语表示））以查看它如何远离其原点观点。考虑到在我们应用RotateX(-80deg) 之后 z 轴光线指向下方，这意味着 z 偏移元素应该向下移动（因为负 z 偏移值意味着“移动更近”）到视口底部。

.section-title {
    text-align: center;
    margin-top: 50px;
    color: #FFF;
}
.section-title span {
    font-size: 36px;
    position: relative;
    display: inline-block;
    padding: 0px 14px;
    background: #2195DE;
    transition: transform .5s ease;
    transform-style: preserve-3d;
}
.section-title span::before {
    position: absolute;
    top: 100%;
    left: 0px;
    width: 150px;
    height: 100%;
    background: #2195DE;
    content: "test";
    transform: rotateX(-80deg);
    transform-origin: 0px 0px -38px;
    text-align: center;
    
}
.section-title span:hover {
    transform: rotateX(80deg);
}
.section-title span:hover::before {
    transform-origin: 0px 0px 0px;
}

<div class="section-title">
    <span>Product Range</span>
</div>

现在 z 偏移面（使用::before 创建）已移近视口底部。这意味着如果我们还没有将它旋转 80 度，它将离屏幕更近 38 像素（因为每边长 38 像素）。我在悬停时将其重新设置回0px，因此它会迅速恢复到正常位置，正如您通过悬停所看到的那样。

此属性对于创建典型 3D 元素的 3D 变换很有用。最明显的选择是六面模具。您可以使用 z 偏移来创建模具的背面（以及 backface-visibility: hidden;，这样我们就不会看穿元素）。