时间戳

首页 > 解决方案 > 为什么 z 轴在 transform-origin 属性中不起作用？

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

问题描述

我认为，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>

标签： htmlcsscss-transforms

解决方案

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

下面是一个带有和不带有透视的示例，以查看差异：

.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=0 平面上的点不变。该参数表示 z=0 平面与观察者的距离。较低的值会产生更扁平的金字塔，因此会产生更明显的透视效果。参考

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

推荐阅读