为什么z轴在变换原点属性中不起作用？

问题描述

我认为，x轴坐标为100％，y轴坐标为0的点应沿z轴移动60px。为什么没有发生？

所以，这是我的代码。预先谢谢你。

.block {
  margin: 50px;
  display: inline-block;
  width: 200px;
  height: 200px;
  background: pink;
  outline: 1px solid black;
  transform-origin: 100% 0 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block:hover {
  transform: rotate(15deg);
}

<div class="block">Hello!</div>

解决方法

没有视角，您将看不到任何效果。

在带有和不带有透视的示例下，可以看到不同之处：

.block {
  margin: 20px;
  display: inline-flex;
  width: 100px;
  height: 100px;
  background: pink;
  outline: 1px solid black;
  transform-origin: 100% 0 60px;
  justify-content: center;
  align-items: center;
}

.block:hover {
  transform:perspective(var(--p,0px)) rotate(15deg);
}

<div class="block">Hello!</div>

<div class="block" style="--p:100px">Hello!</div>

如果您删除了z轴值，则透视图也将无效：

.block {
  margin: 20px;
  display: inline-flex;
  width: 100px;
  height: 100px;
  background: pink;
  outline: 1px solid black;
  transform-origin: 100% 0 0;
  justify-content: center;
  align-items: center;
}

.block:hover {
  transform:perspective(var(--p,0px)) rotate(15deg);
}

<div class="block">Hello!</div>

<div class="block" style="--p:100px">Hello!</div>

指定透视投影矩阵。此矩阵根据 Z值缩放X和Y中的点，将远离原点的Z值为正的点缩放为Z，而将Z值为负的点向原点缩放。 z = 0平面上的点不变。该参数表示z = 0平面到观察者的距离。较低的值使金字塔更平坦，因此透视效果更加明显。 ^ref

从以上所述，您可以考虑使用transform-origin的透视图和z轴来模拟translateZ()

.block {
  margin: 20px;
  display: inline-flex;
  width: 100px;
  height: 100px;
  background: pink;
  outline: 1px solid black;
  justify-content: center;
  align-items: center;
}

<div style="display:inline-block;perspective:200px;">
<div class="block" style="
  transform:translateZ(-50px);
">Hello!</div>
</div>


<div class="block" style="
  transform-origin: 50% 50% 50px;
  transform:perspective(200px);
">Hello!</div>

,

transform-origin属性允许您更改变换后元素的位置。

2D变换可以更改元素的x轴和y轴。 3D变换也可以更改元素的z轴。