css - 了解 transform-origin 中的 z 偏移

Question

我正在尝试研究 transform origin 属性以及该属性的工作原理。我做了一个小演示 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 轴属性值，以及没有它会有什么VISUAL 差异。

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

z-offset::

Is a (and never a which would make the statement invalid) describing how far from the user eye the z=0 origin is set.

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

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

Answer 1

首先，z-offset transition-origin 的值仅适用于 3D 转换。幸运的是，你的 fiddle 里有一个，但你尝试的唯一值似乎是零(默认值)；不输入值等同于输入默认值 0。将其视为与 z-index 相同的原则: 你告诉它它需要离屏幕多近。

有一个重要的警告:z-offset 中的值与 z-index(以及 translateZ)。较高的 z-index 将使元素更靠近屏幕(因为堆叠上下文从 0 开始，更高的堆叠级别使您更靠近屏幕)，但是更高 z-offset 将元素的原点移得更远(因为z-offset 描述了有多远 元素的 transform-origin 应该是，更高的 z 偏移值 = 更远)。

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

看看这张图，设置 -38px 的 z 偏移量会使元素的变换原点更靠近我们一点。相反，38px 的 z 偏移会将变换原点移得更远一些。

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

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

.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 创建)已移近视口(viewport)底部。这意味着如果我们还没有将它旋转 80 度，它将离屏幕更近 38 像素(因为每边长 38 像素)。我在悬停时将其重新设置回 0px，因此它会弹回到正常位置，正如您通过悬停所看到的那样。

此属性对于创建典型 3D 元素的 3D 转换很有用。最明显的选择是六面骰子。您可以使用 z 偏移来创建骰子的背面(以及 backface-visibility: hidden; 这样我们就不会看透元素)。