transform3d（）：使用百分比在父对象内移动
以百分比移动对象时，CSS具有标准行为，此百分比表示其父容器（div）的尺寸。
当使用CSS3 transform: translate3d()时，这不是真的transform: translate3d() 。 如果使用X，Y或Z坐标的百分比值，百分比代表当前对象的尺寸 ，而不是其父对象的尺寸 。
这个问题现在应该很明显了：如果我需要使用CSS3动画并进行transform: translate3d()将其当前对象移动到动态调整大小的父级的维度中，我简直不知道该怎么做。 示例：使用translate3d(100%, 0, 0)将按当前对象的物理宽度移动对象，而不是其包含的块。
任何想法如何获得动态变化的父母的维度，请？ 或者如何使当前对象使用硬件加速translate3d()在其父代中进行translate3d() ？
Mozilla开发人员网络确认： 百分比（转换中）指的是边界框的大小。
请问有什么解决方法吗？
我不认为有一个纯CSS的解决方案。 我的方法是在将JavaScript与您的目标X值相乘之前，使用JavaScript来计算包裹元素的宽度和孩子的宽度之间的关系：
var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0,0)";
这是我的意思的一个工作示例：http://jsfiddle.net/Whre/7qhnA/2/
不幸的是，除非你愿意使用视口单元，否则这是不可能的 - 即使如此，如果它与视口宽度不同，它也会有一些选择性计算父宽度。 对于父维度的百分比，您需要使用Javascript。
这里有一个简单的JS例子。 http://cssdeck.com/labs/bus53o22
要使用没有固定值的Z轴，请使用：
transform: rotateY(90deg) translateX(-50%) rotateY(-90deg);
在移动之前旋转对象，并再次旋转以正常化位置。 在Google Chrome中测试。
链接地址: http://www.djcxy.com/p/80641.html上一篇: transform3d(): Using Percentage to Move Within Parent Object