了解变换原点中的 z 偏移

我正在尝试研究变换原点属性以及该属性的工作原理。我做了一个小演示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;

并没有看到任何区别。我的问题是理解 z 轴属性值transform-origin财产和什么视觉差异有无它。

MDN 对 z 轴属性有以下定义：

z-offset::

是一个（并且从来不是一个会做出声明的 无效）描述了 z=0 原点距离用户眼睛有多远。

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

有人可以帮我理解 z 偏移的重要性吗？tranform-origin？有人可以提供一个直观的例子来说明 z 偏移的作用吗？

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

有一个重要的警告：值在z-offset反转自z-index（也translateZ）。更高的z-index会将项目移近屏幕（因为堆叠上下文从 0 开始，更高的堆叠级别使您更靠近屏幕），但是a higher z-offset 移动元素的原点更远的地方（自从z-offset正在描述如何far away一个元素的transform-origin应该，更高的 z 偏移值 = 更远的地方).

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

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

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

让我们以您的示例为例，将附加面的 z 偏移更改为-38px（最初可见的面的长度（CSS 术语中的高度））以查看它如何远离其原点。考虑到我们应用后 z 轴射线指向下方RotateX(-80deg)，这意味着 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;这样我们就不会看穿该元素）。