TranslateZ 百分比CSS 3D 变换

Question

TranslateZ 百分比CSS 3D 变换

8

当我尝试像这样设置translateZ的百分比:

transform:translateZ(-100%);

它不起作用。也不适用于视口相对的vh或vw。有什么办法可以解决这个问题吗？我知道我可以使用JavaScript简单地设置它，但是在某个类中有许多这些元素，包括稍后使用JavaScript动态添加的元素。更方便的是在CSS中做一些事情。我看到了一个似乎是重复的东西，但我希望有一种不必修复多个元素的方法。除了附加到<style>元素之外，当然

- markasoftware

你期望什么结果？100% 的是什么？ - vals

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vals · Accepted Answer

看了一下translateZ的w3c规范，没有明确说明百分比值应该怎么处理...(或者至少对我来说不太清楚应该如何实现)。

不过在规范中已经决定，translateX(100%)将是相对于宽度的。

所以，实现你想要的效果的一种方式是先旋转直到x轴成为z轴，然后进行x轴平移，并恢复旋转：

CSS

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

在这个演示中，您可以看到应用了变换的测试元素与应用了 translateZ(100px)（由于元素宽度为100px）的参考元素到达相同的位置。