透视和平移Z对角移动

时间:2019-03-04 16:51:08

标签: css css3 css-transforms perspective

引用此链接: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>

1 个答案:

答案 0 :(得分:4)

所有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>