perspective 和 translateZ 沿对角线移动
perspective and translateZ moves diagonally
参考此 link:https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
必须设置透视才能沿 z 轴移动子元素。上面的 link 显示了不同透视值的示例,所有这些都将 z 轴设置为对角线方向。
如果我直视 3D 立方体的表面并将其向后移动(沿 z 轴),它看起来会变小(远离我),而不是沿对角线移动。那么为什么 CSS 默认有一个对角线的 z 轴呢?有没有一种方法可以使用 perspective 和 translateZ 以及一个完全远离用户的 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>
这完全是 perspective-origin
的问题,它定义了我们应该如何看到更改。
如果您阅读相同的内容 link,您会注意到这一点:
The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.
下面是一些你可以更好理解的例子:
.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
控制原点,因为我们使用的是透视图 a 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>
参考此 link:https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
必须设置透视才能沿 z 轴移动子元素。上面的 link 显示了不同透视值的示例,所有这些都将 z 轴设置为对角线方向。
如果我直视 3D 立方体的表面并将其向后移动(沿 z 轴),它看起来会变小(远离我),而不是沿对角线移动。那么为什么 CSS 默认有一个对角线的 z 轴呢?有没有一种方法可以使用 perspective 和 translateZ 以及一个完全远离用户的 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>
这完全是 perspective-origin
的问题,它定义了我们应该如何看到更改。
如果您阅读相同的内容 link,您会注意到这一点:
The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.
下面是一些你可以更好理解的例子:
.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
控制原点,因为我们使用的是透视图 a 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>