CSS以标准行为，当以百分比移动对象时，此百分比表示其父容器（div）的尺寸。
使用CSS3 transform: translate3d()时不是这样。如果对X，Y或Z坐标使用百分比值，则百分比表示当前对象的维度，而不是其父对象。
问题现在应该是显而易见的：如果我需要使用CSS3动画并且transform: translate3d()将当前对象移动到其动态可调整大小的父级的维度内，我根本就不知道该怎么做。例如：使用translate3d(100%, 0, 0)将对象移动当前对象的物理宽度，而不是其包含的块。
有关如何动态更改父级维度的任何想法，好吗？或者如何使用硬件加速translate3d()？
Mozilla开发者网络确认：百分比（转换中）是指边界框的大小。
请问有解决方法吗？
答案 0 :(得分：3)
我认为没有纯CSS解决方案。 我的方法是使用JavaScript计算包装元素的宽度与子宽度之间的关系，然后再将其与目标X值相乘：
var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0,0)";
以下是我的意思的一个工作示例：http://jsfiddle.net/Whre/7qhnA/2/
答案 1 :(得分：1)
不幸的是，除非您愿意使用视口单元，否则使用纯CSS是不可能的 - 即使这样，如果它与视口宽度不同，它也会选择性地计算父宽度。对于父级维度的百分比，您需要使用Javascript。
这是一个简单的JS示例。 http://cssdeck.com/labs/bus53o22
答案 2 :(得分：1)
@Bunkai.Satori要在纯css中执行此操作，只需将该元素放入与父宽度和高度匹配的新容器中，然后在新容器上使用transform3d（）。
答案 3 :(得分：0)
要使用没有固定值的Z轴，请使用：
transform: rotateY(90deg) translateX(-50%) rotateY(-90deg);
在移动之前旋转对象，然后再次旋转以标准化位置。 在谷歌浏览器中测试过。