10

当以百分比移动对象时，CSS 具有标准行为，该百分比表示其父容器 (div) 的尺寸。

使用 CSS3 时，情况并非如此transform: translate3d()。如果对 X、Y 或 Z 坐标使用百分比值，则百分比表示当前对象的尺寸，而不是其父对象。

现在问题应该很明显了：如果我需要使用 CSS3 动画并将transform: translate3d()当前对象移动到其动态可调整大小的父对象的尺寸内，我根本不知道该怎么做。一个例子： usingtranslate3d(100%, 0, 0)将按照当前对象的物理宽度移动对象，而不是它的包含块。

任何想法如何获得父母的动态变化的尺寸，拜托？或者如何使用硬件加速使当前对象在其父对象内转换translate3d()？

Mozilla 开发者网络确认：Percentages(in transitions) 是指边界框的大小。

请问有什么解决办法吗？

4

4 回答 4

3

我认为没有纯 CSS 的解决方案。我的方法是使用 JavaScript 计算包装元素的宽度与子元素的宽度之间的关系，然后再将其与目标 X 值相乘：

var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0,0)";

这是我的意思的一个工作示例：http: //jsfiddle.net/Whre/7qhnA/2/

于 2014-07-30T21:08:05.250 回答
1

不幸的是，除非您愿意使用视口单位，否则纯 CSS 不可能做到这一点 - 即使这样，如果父宽度与视口宽度不同，它也将是一些选择性计算。对于父维度的百分比，您需要使用 Javascript。

这是一个简单的 JS 示例。http://cssdeck.com/labs/bus53o22

于 2014-07-30T21:02:39.063 回答
1

@Bunkai.Satori 要在纯 CSS 中做到这一点，只需将该元素放在与父宽度和高度匹配的新容器中，然后在新容器上使用 transform3d() 。

于 2016-09-21T16:05:51.607 回答
0

要使用没有固定值的 Z 轴，请使用：

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

在移动之前旋转对象，然后再次旋转以标准化位置。在谷歌浏览器中测试。

于 2016-05-06T23:38:16.970 回答