CSS 具有标准行为,当以百分比移动对象时,该百分比表示其父容器 (div) 的尺寸。
当使用 CSS3 transform: translate3d()
时,情况并非如此。如果对 X、Y 或 Z 坐标使用百分比值,则百分比表示当前对象的尺寸,而不是其父对象。
现在问题应该很明显了:如果我需要使用 CSS3 动画和 transform: translate3d()
将当前对象移动到其可动态调整大小的父对象的维度内,我根本不知道如何做吧。示例:使用 translate3d(100%, 0, 0)
会将对象移动当前对象的物理宽度,而不是其包含 block 。
有什么想法可以动态改变父级的尺寸吗?或者如何使用硬件加速 translate3d()
使当前对象在其父对象内平移?
Mozilla Developer Network 确认:百分比(在转换中)指的是边界框的大小。
请问有什么解决方法吗?
最佳答案
我不认为存在仅 CSS 的解决方案。 我的方法是在将它与目标 X 值相乘之前使用 JavaScript 计算包装元素的宽度与子元素的宽度之间的关系:
var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0,0)";
这是我的意思的一个工作示例:http://jsfiddle.net/Whre/7qhnA/2/
关于css - transform3d() : Using Percentage to Move Within Parent Object,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25046493/