Bun*_*ori 8 css css3 css-transforms css-animations translate3d
当以百分比移动对象时,CSS具有标准行为,该百分比表示其父容器(div)的维度.
使用CSS3时不是这样transform: translate3d().如果对X,Y或Z坐标使用百分比值,则百分比表示当前对象的尺寸,而不是其父对象的尺寸.
问题现在应该是显而易见的:如果我需要使用CSS3动画并将transform: translate3d()当前对象移动到其动态可调整大小的父级的维度内,我根本就不知道该怎么做.示例:using translate3d(100%, 0, 0)将按当前对象的物理宽度移动对象,而不是其包含的块.
有任何想法如何动态改变父母的维度,好吗？或者如何使用硬件加速使当前对象在其父级内进行转换translate3d()？
Mozilla Developer Network确认:百分比(转换中)是指边界框的大小.
请问有解决方法吗？
我不认为有一个仅 CSS 的解决方案。我的方法是使用 JavaScript 计算包装元素的宽度和子元素的宽度之间的关系，然后将其与目标 X 值相乘：
var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0,0)";
这是我的意思的一个工作示例：http ://jsfiddle.net/Whre/7qhnA/2/