TranslateZ百分比CSS 3D变换

Question

当我尝试在translateZ中设置百分比时,如下所示:

transform:translateZ(-100%);

它不起作用.它也不适用于视口相对vh或vw.有办法做到这一点吗？我知道我可以简单地用JavaScript设置它,但我在某个类中有很多这些元素,包括稍后用JavaScript动态添加的元素.在CSS中做一些事情会更方便.我看到了一些似乎重复的东西,但我想要一种不需要多个元素来修复它的方法.除了追加<style>元素之外,就是这样

Answer 1

那么,阅读translateZ的w3c规范,不清楚是否有人考虑过应该在那里做一个百分比值...(或者至少,我不清楚应该是什么样的实现).

然而,标准中已经确定的是translateX(100%)将相对于宽度.

因此,获得所需的方法是旋转直到x轴在z轴上,进行ax平移,并恢复旋转:

CSS

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

在本演示中,您可以看到应用了该变换的测试元素到达与应用了translateZ(100px)的ref元素相同的位置(因为元素宽度为100px)