为什么 z 轴在 transform-origin 属性中不起作用？

Question

按照我的想法，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>

Answer 1

不透视是看不到效果的

下面举个例子，看看有没有透视图的区别：

.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-axis 值，透视也将无效：

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

specifies a perspective projection matrix. This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The parameter represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. ^ref

从上面可以考虑使用透视和transform-origin的z-axis来模拟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>

Answer 2

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

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

为什么 z 轴在 transform-origin 属性中不起作用？

Why z-axis doesn't work in transform-origin property?

html

css

css-transforms

为什么 z 轴在 transform-origin 属性 中不起作用？

Why z-axis doesn't work in transform-origin property?

html

css

css-transforms

为什么 z 轴在 transform-origin 属性中不起作用？