了解 transform-origin 中的 z 偏移

Question

我正在尝试研究变换原点属性以及这个属性的工作原理。我做了一个小demo 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 value for transition-origin only works on 3D transforms. Luckily, you have one in your fiddle, but it seems like the only value you tried was zero (the default value); not entering a value is the same as entering 0, the default. Think of it as the same principle as the z-index：您要告诉它需要离屏幕多近。

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

所以要理解 3D 图，请从 z 轴光线直接向我们移动的角度考虑这些轴。

看这张图，设置 -38px 的 z-offset 会使元素的 transform-origin 点离我们更近一点。相反，38px 的 z-offset 会将 transform-origin 点移得更远。

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

让我们以你的例子为例，将附加面的 z-offset 更改为 -38px（最初可见的面的长度（其高度，以 CSS 计算））看看它如何远离它的原点。考虑到 z-axis 射线在我们应用 RotateX(-80deg) 后指向下方，这意味着 z-offset 元素应该向下移动（因为负 z-offset 值意味着 "move closer"）视口底部。

.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-offset 面（使用 ::before 创建）已移近视口底部。这意味着如果我们还没有将它旋转 80 度，它将离屏幕更近 38 像素（因为每边长 38 像素）。我 re-set 它在悬停时回到 0px，所以它会快速回到正常位置，正如您通过悬停看到的那样。

这属性对于创建典型 3D 元素的 3D 转换很有用。最明显的选择是 six-sided 骰子。您将使用 z-offset 来创建骰子的背面（连同 backface-visibility: hidden; 这样我们就不会看穿元素）。

了解 transform-origin 中的 z 偏移

Understanding the z-offset in transform-origin

css

css-transitions

css-transforms