理解变换原点中的z偏移 [英] Understanding the z-offset in transform-origin
问题描述
我试图研究transform origin属性以及这个属性是如何工作的。我已经做了一个小演示 这里 。
HTML：
< div class =section-title>
< span data-hover =Product Range>产品范围< / span>
< / div>
CSS：
code> .section-title {
text-align：center;
margin：50px 0px;
color：#FFF;
text-transform：uppercase;
透视：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无重复滚动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 :: ::
是一个（从不是一个会使语句
无效）描述离用户眼睛有多远z = 0 origin is set。
但是尽管有定义，但我无法理解或重新创建任何这样的示例， z偏移使任何视觉差异。
这里有人可以帮助我理解 tranform-origin 中z偏移的意义是什么？可以有人提供一个视觉的例子，什么z-偏移？
首先， transition-origin 的CSS / transform-originrel =nofollow noreferrer> z-offset 值仅适用于3D变换。幸运的是，你有一个在你的小提琴，但它似乎只有你尝试的值为零（默认值）;不输入值与输入0相同，默认值。您可以将其视为与 z-index ：你告诉它它需要离屏幕有多近。
有一个重要警告： z-offset 中的值与< c $ c> z-index （以及 translateZ ）。较高的 z-index 会将项目移动到屏幕附近（因为堆叠上下文从0开始，较高的堆叠级别会使您更靠近屏幕），但 a c> > z-offset 描述了如何远离元素的 transform-origin 应该是，
查看此图表，设置 -38px 的z偏移会将元素的变换起点小靠近我们。相反， 38px 的z偏移会将变换起点移动一点。
例如，span元素已经沿着X轴旋转了-80度（我选择了80度，而不是90度，这样您就可以更容易看到旋转）。这是首先做的，因为3D变换是累积的，所以每个变换是按顺序完成的，一步一步（这也意味着父母的变换由他们的孩子继承）。所以真的，上面的图表现在可以考虑旋转，z轴射线指向下，y轴射线指向远离我们。
让我们来看看你的例子，将附加面的z偏移量改为 -38px 高度，在CSS术语中），看看它是如何移动更远离其原点。考虑到在我们应用 RotateX（-80deg）之后z轴射线指向下方，这意味着z偏移元素应该向下移动（因为负z偏移值意味着
{text-align：center; margin-top：50px; color：#FFF;}。section-title span {font-size：36px;位置：相对; display：inline-block; padding：0px 14px;背景：＃2195DE; transition：transform .5s ease; transform-style：preserve-3d;}。section-title span :: before {position：absolute; top：100％; left：0px; width：150px;高度：100％;背景：＃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>产品范围< / span>< / div>
现在z-offset面（用 :: before 创建）已经移动到更靠近视口的底部。这意味着它将是38px（因为每一边是38px长）更接近屏幕，如果我们没有旋转它80度已经。在悬停时，我将其重新设置为 0px ，因此它会回到正常位置，您可以通过悬停来看到。
此属性对于创建通常为3D元素的3D变换非常有用。最明显的选择是六面模具。您将使用z-offset创建模具的背面（以及 backface-visibility：hidden; ，以便我们不会看到该元素）。
I am trying to study the transform origin property and how exactly this property works. I have made a small 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%;
}
Now if you have a look at the transform-origin property it had the following definition in the stylesheet:
transform-origin: 50% 0 0;
I changed it to:
transform-origin: 50% 0;
and saw no difference. My problem is understanding the z-axis property value in the transform-origin property and what VISUAL difference there is without it .
MDN has the following definition for z-axis property:
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.
but in spite of the definition, I fail to understand or re-create any such example in which the z-offset makes any visual difference.
Can somebody here please help me understand of what significance is the z-offset in tranform-origin? can somebody provide a visual example of what the z-offset does?
First, the 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: you're telling it how close to the screen it needs to be.
There's an important caveat: values in z-offset are reversed from z-index (as well as translateZ). A higher z-index will move items closer to the screen (since the stacking context starts at 0 and higher stacking levels bring you closer to the screen), but a higher z-offset moves the element's origin farther away (since the z-offset is describing how far away an element's transform-origin should be, higher z-offset values = farther away).
So to understand the 3D graph, consider these axes from the point of view of the z axis ray moving directly toward us.
Looking at this graph, setting a z-offset of -38px would move an element's transform-origin point a little closer to us. Inversely, a z-offset of 38px would move the transform-origin point a little farther away.
In this example, however, the span element has already been rotated -80 degrees (I picked 80 instead of 90 so that you can see the rotation a bit easier) along the X axis. This is done first, since 3D Transforms are cumulative, so each transform is done in order, step-by-step (this also means that transforms of parents are inherited by their children). So really, the graph above can now be considered rotated as well, with the z-axis ray pointing down, and the y-axis ray pointing away from us.
Let's take your example and change the z-offset of the additional face to -38px (the length (its height, in CSS terms) of the face that is initially visible) to see how it moves farther away from its origin point. Considering the z-axis ray was pointing down after we applied RotateX(-80deg), that means the z-offset element should move down (since negative z-offset values mean "move closer") to the bottom of the 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>
Now the z-offset face (created with ::before) has moved closer to the bottom of the viewport. This means it would be 38px (since each side is 38px long) closer to the screen if we hadn't rotated it 80 degrees already. I re-set it back to 0px on hover, so it snaps back to normal position, as you can see by hovering.
This property is useful for creating 3D transforms of typically 3D elements. The most obvious choice is a six-sided die. You would use the z-offset to create the back side of the die (along with backface-visibility: hidden; so that we don't see through the element).
这篇关于理解变换原点中的z偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
