css - 了解transform-origin中的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;

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

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


  z偏移：：
  
  是（而且永远不会做出这样的陈述
  无效）描述了设置z = 0原点距用户眼睛有多远。


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

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

最佳答案

首先，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-offset设置为-38px会将元素的变换原点移近一点。相反，38px的z偏移将使变换源点移动得更远。

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

让我们以您的示例为例，将其他人脸的z偏移更改为-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度，则距屏幕更近38px（因为每边长38px）。悬停时，我将其重新设置为0px，因此它会恢复到正常位置，如悬停所示。

此属性对于创建通常为3D元素的3D变换很有用。最明显的选择是六面模具。您将使用z-offset来创建模具的背面（以及backface-visibility: hidden;，以便我们看不到元素）。