透视和平移Z沿对角线移动 [英] perspective and translateZ moves diagonally

问题描述

引用此链接: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

必须设置透视图以沿z轴移动子元素.上面的链接显示了不同透视图值的示例，所有这些透视图值都将z轴设置为对角线方向.

Perspective must be set to move a child element along the z-axis. The link above show examples of different perspective values, all of which set the z-axis in a diagonal direction.

如果我直接看3D立方体的表面，然后将其向后移动(沿z轴)，则看起来它正在变小(远离我)，而不是沿对角线移动.那么，为什么CSS默认情况下具有对角的z轴呢?有没有一种方法可以使用透视图和平移Z轴完全远离用户移动?

If I'm looking directly at the face of a 3D cube and I move it backwards (along the z-axis) it would look like it's getting smaller (moving away from me), not moving diagonally. So why does CSS have a diagonal z-axis by default? Is there a way to use perspective and translateZ with a z-axis that moves exactly away from the user?

我已经用以下代码对此进行了测试:

Some code I've been testing this with:

.wrapper {
  position: relative;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  transform-style: preserve-3d;
}

.cube {
  transform-origin: 50% 50%;
  transform: translateZ(-1px);
}

<div class="wrapper">
  <div class="cube"></div>
</div>

推荐答案

所有这些都是perspective-origin的问题，它定义了更改对我们而言如何可见.

It's all a matter of perspective-origin that define how the changes should be visible to us.

如果您阅读相同的链接，您会注意到以下内容:

If you read the same link you will notice this:

消失点默认情况下放置在元素的中心，但是可以使用Perspective-origin属性更改其位置.

The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.

下面是一些您可以更好地理解的示例:

Here is some example where you can better understand:

.wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  border: 1px solid;
  perspective: 10px;
  transform-style: preserve-3d;
}

.cube {
  width: 100%;
  height: 100%;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: translateZ(-10px);
  }
}

moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" style="perspective-origin:left">
  <div class="cube"></div>
</div>
moving from a custom point
<div class="wrapper" style="perspective-origin:20% 80%">
  <div class="cube"></div>
</div>

在处理具有width:100%的默认块元素时，您还需要注意，因为该位置将认为父元素不是子元素.

You need to also pay attention when you deal with default block element having width:100% as the position will consider the parent element no the child one.

删除宽度并查看差异:

.wrapper {
  position: relative;
  border: 1px solid;
  perspective: 10px;
  transform-style: preserve-3d;
}

.cube {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: translateZ(-10px);
  }
}

moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" style="perspective-origin:left">
  <div class="cube"></div>
</div>
moving from a custom point
<div class="wrapper" style="perspective-origin:20% 80%">
  <div class="cube"></div>
</div>

在以上代码中，父容器控制着透视图.您可以将其移动到子元素，如下所示:

In the above codes, the parent container is controlling the perspective. You can move this to the child element like this:

.wrapper {
  position: relative;
  border: 1px solid;
}

.cube {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: perspective(10px) translateZ(-10px);
  }
}

moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" >
  <div class="cube" style="transform-origin:left"></div>
</div>
moving from a custom point
<div class="wrapper" >
  <div class="cube" style="transform-origin:20% 80%"></div>
</div>

如您所见，我们使用transform-origin控制原点，因为我们使用的是

As you can see, we control the origin using transform-origin because we are using perspective a transform-function and no more as a property.

更改perspective-origin，将不会发生任何事情

Change perspective-origin and nothing will happen

.wrapper {
  position: relative;
  border: 1px solid;
}

.cube {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: perspective(10px) translateZ(-10px);
  }
}

moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" style="perspective-origin:left">
  <div class="cube" style="perspective-origin:left"></div>
</div>
moving from a custom point
<div class="wrapper" style="perspective-origin:20% 80%">
  <div class="cube" style="perspective-origin:20% 80%"></div>
</div>

这篇关于透视和平移Z沿对角线移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！