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-偏移 ::

是一个（并且永远不会发表声明   无效）描述设置z = 0原点与用户眼睛的距离。

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

有人可以帮我理解tranform-origin中z偏移的重要性吗？有人可以提供z-offset的视觉示例吗？

Answer 1

首先，transition-origin的{{3}}值仅适用于3D变换。幸运的是，你有一个在你的小提琴，但似乎你尝试的唯一值是零（默认值）;不输入值与输入0（默认值）相同。可以将其视为与z-offset相同的原则：您告诉它它与屏幕的接近程度。

有一个重要的警告：z-offset中的值与z-index（以及translateZ）相反。较高的z-index会将项目移近屏幕（因为堆叠上下文从0开始，更高的堆叠级别使您更接近屏幕），但更高 z-offset < strong>移动元素的来源更远（因为z-offset描述的是远离元素＆＃39; s { {1}}应该是，更高的z偏移值 = 更远）。

因此，要了解3D图形，请从z轴光线直接朝向我们的角度考虑这些轴。

3D axes

查看此图表，设置transform-origin的z偏移会使元素的变换原点更接近我们。相反，-38px的z偏移会使变换原点稍微移动一点。

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

让我们以你的例子为例，将附加面的z偏移更改为38px（最初可见的面的长度（以CSS为单位的高度），看看它是如何形成的离原点越远越远。在我们应用-38px之后，考虑到z轴光线指向下方，这意味着z偏移元素应该向下移动（因为负z偏移值意味着＆＃34;更接近＆＃34;）到底部视口。

＆＃13;

RotateX(-80deg)

＆＃13;

.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;
}

＆＃13;

现在，z偏移面（使用<div class="section-title"> <span>Product Range</span> </div>创建）已移近视口底部。这意味着如果我们还没有将它旋转80度，它将是38px（因为每边长38px）靠近屏幕。我在悬停时将其重新设置为::before，因此它可以快速恢复到正常位置，正如您可以通过悬停看到的那样。

此属性对于创建通常为3D元素的3D变换非常有用。最明显的选择是六面模具。你可以使用z-offset来创建骰子的背面（以及0px，这样我们就不会看到元素了。）

理解transform-origin中的z偏移

1 个答案: