TranslateZ百分比CSS 3D转换的

Question

当我尝试设置百分比在translateZ这样的：

transform:translateZ(-100%); 

这是行不通的。它也不适用于相对于视口vh或vw。有没有办法做到这一点？我明白我可以简单地用JavaScript来设置它，但是我在某个类中包含了很多这样的元素，其中包括随后用JavaScript动态添加的元素。在CSS中做一些事情会更方便。我看到了一些看起来像重复的东西，但我想要一种不需要多个元素来修复它的方法。除了追加<style>元素，也就是

Answer 1

那么，读取translateZ的w3c规范，目前还不清楚有没有人想过应该在哪里做一个百分比值..（或者至少对我而言并不清楚应该是什么实施）。

然而，标准中已经确定的是translateX（100％）将与宽度有关。

因此，一种方式来获得你想要将旋转，直到x轴Z轴，做斧翻译，并恢复旋转什么：

CSS

transform: rotateY(-90deg) translateX(100%) rotateY(90deg); 

在这demo您可以看到，已应用该变换的测试元素获得与应用translateZ（100px）的ref元素相同的位置（因为元素宽度为100px）