透视和平移Z对角移动

Question

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

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

如果我直接看3D立方体的表面，然后将其向后移动（沿z轴），则看起来它正在变小（远离我），而不是沿对角线移动。 那么，为什么CSS默认具有对角线的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>

Answer 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-origin因为我们使用的是Perspective的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>