当我尝试在translateZ中设置百分比时：
transform:translateZ(-100%);
它不起作用。它也不适用于视口相对vh或vw。有办法做到这一点吗？我知道我可以简单地用JavaScript设置它，但我在某个类中有很多这些元素，包括稍后用JavaScript动态添加的元素。在CSS中做一些事情会更方便。我看到了一些似乎重复的东西，但我想要一种不需要多个元素来修复它的方法。除了附加<style>元素，即
答案 0 :(得分：9)
那么，阅读translateZ的w3c规范，不清楚是否有人考虑过应该在那里做一个百分比值...（或者至少，我不清楚应该是什么样的实现）。
然而，标准中已经确定的是translateX（100％）将相对于宽度。
所以，获得你想要的东西的方法是旋转直到x轴在z轴上，进行x平移，并恢复旋转：
CSS
transform: rotateY(-90deg) translateX(100%) rotateY(90deg);
在这个demo中，您可以看到应用了该变换的test元素到达了ref元素的位置，该元素应用了translateZ（100px）（因为元素宽度为100px）