当我尝试像这样在 translateZ 中设置百分比时:
transform:translateZ(-100%);
这是行不通的。它也不适用于相对视口(viewport) vh或 vw .有什么办法可以做到这一点？我知道我可以简单地用 JavaScript 设置它，但是我在某个类中有很多这样的元素，包括稍后用 JavaScript 动态添加的元素。在 CSS 中做一些事情会方便得多。我看到了一些看起来像重复的东西，但我想要一种不需要多个元素来修复它的方法。除了附加到 <style>元素，即
最佳答案
好吧，阅读 translateZ 的 w3c 规范，不清楚是否有人考虑过应该在那里做一个百分比值..(或者至少，我不清楚应该实现什么)。
然而，标准中已经决定，translateX(100%) 将与宽度相关。
因此，获得所需内容的一种方法是旋转直到 x 轴位于 z 轴上，进行 x 轴平移，然后恢复旋转:
CSS
transform: rotateY(-90deg) translateX(100%) rotateY(90deg);
在此demo您可以看到应用了该转换的测试元素到达与应用了 translateZ(100px) 的 ref 元素相同的位置(因为元素宽度为 100px)
关于javascript - TranslateZ 百分比 CSS 3D 变换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20184600/