perspective 和 translateZ 沿对角线移动答案

【问题标题】：perspective and translateZ moves diagonallyperspective 和 translateZ 沿对角线移动
【发布时间】：2019-07-26 00:57:32
【问题描述】：

参考此链接：https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

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

如果我直视 3D 立方体的表面并将其向后移动（沿 z 轴），它看起来会变小（远离我），而不是沿对角线移动。那么为什么CSS默认有对角z轴呢？有没有办法使用与用户完全远离的 z 轴的透视和平移 Z？

我一直在测试的一些代码：

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

【问题讨论】：

example at the bottom 是你想要的吗？

标签： css css-transforms perspective

【解决方案1】：

perspective-origin 定义了我们应该如何看到更改。

如果您阅读相同的链接，您会注意到：

消失点默认位于元素的中心，但可以使用 perspective-origin 属性更改其位置。

下面是一些你可以更好理解的例子：

.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% 的默认块元素时还需要注意，因为该位置将考虑父元素而不是子元素。

去掉宽度看看区别：

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

在上面的代码中，父容器控制着透视图。您可以像这样将它移动到子元素：

.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 控制原点，因为我们使用透视transform-function 而不再作为属性。

更改perspective-origin，什么都不会发生

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

【讨论】：