javascript - css的transform-origin-z为什么不能用百分比？

Question

如果我想取Z轴的50%为origin，应该怎么做

Answer 1

我们只知道一个p的高和宽，但是不知道有多厚。

---

在css中，我们可以这样写

p{
    height: 100px;
    width: 100px;
}

或者这样写

p{
    height: 100%;
    width: 100%;
}

我们决定了p的宽和高，但是，在z轴方向上，我们不能定义p的厚度。也就是说p是二维的。

css中某些属性取值为百分比，需要一个参考点。

宽和高的百分比都是以父节点为参考点

.out{
    height: 100px;
    width: 100px;
}
.inner{
    height: 50%;
    width: 50%;
}

<p class="out">
    <p class="inner">宽和高都是父节点的一半(50px)</p>
</p>

而transform-origin百分比值是以自身为参考点

p{
    height: 200px;
    width: 200px;
    transform-origin-x: 100%; // 以自身（宽）为参考点，会向右移动200px（100%*200）
    transform-origin-z: 100%; // 这个p到底有多厚，谁来告诉我，我改怎么办？
}

transform-origin以及其他css属性都是应用在具体的节点上，不是你弄一个3D的模型，然后对整个模型使用css属性。

所以，transform-origin-z不能使用百分比值，要给一个具体的值。

Answer 2

X,y轴有极限值，就是容器本身；Z轴没有极限值所以没有50%；