了解变换原点中的z偏移

Question

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

现在，如果你看一下变换-origin属性它在样式表如下定义：

transform-origin: 50% 0 0; 

我将它改为：

transform-origin: 50% 0; 

并没有什么区别。我的问题是了解transform-origin属性中的z轴属性值，以及没有它的情况下有什么VISUAL差异。

MDN对Z轴属性的定义如下：

Z-偏移 ::

是一个（和从来没有这将使声明 无效）描述了如何远离用户眼睛设置了z = 0原点。

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

有人可以在这里请帮我理解在tranform-origin中z偏移的意义是什么？有人可以提供一个关于z偏移量的视觉例子吗？

Answer 1

首先，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偏移的-38px将移动元素的变换原点一点点离我们更近。相反，如果z偏移量为38px，则会将转换原点稍微远离一点。

但是，在这个例子中，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偏移来创建模具的背面（以及backface-visibility: hidden;，以便我们不会看到该元素）。