transform3d（）：使用百分比在父对象内移动 [英] transform3d(): Using Percentage to Move Within Parent Object

问题描述

当以百分比移动对象时，CSS具有标准行为，此百分比表示其父容器（div）的维度。

CSS has standard behavior, when moving an object in percentage, that this percentage represents dimensions of its parent container (div).

使用CSS3时， transform：translate3d（）。如果使用X，Y或Z坐标的百分比值，则百分比代表当前对象的尺寸，而不是其父对象。

This is not true when using CSS3 transform: translate3d(). If using percentage values for either X, Y, or Z coordinate, the percentage represents dimensions of the current object, not its parent.

问题应该是显而易见的现在：如果我需要使用CSS3动画和 transform：translate3d（）移动当前对象在其动态可伸缩的父的维我只是不知道怎么做。示例：使用 translate3d（100％，0，0）将按当前对象的物理宽度移动对象，而不是其包含的块。

The problem should be obvious now: if I need to use CSS3 animation and transform: translate3d() to move current object within dimensions of its dynamically re-sizable parent I simply do not know how to do it. An example: using translate3d(100%, 0, 0) will move the object by the physical width of the current object, not its containing block.

任何想法如何获得动态变化的父母的尺寸，请？或者如何使当前对象在其父级中使用硬件加速转换 translate3d（）？

Any ideas how to get dynamically changing dimensions of parent, please? Or how to make the current object to translate within its parent using hardware accelerated translate3d()?

Mozilla开发人员网请确认：百分比（在转换中）是指边框大小。

Mozilla Developer Network confirm that: Percentages(in transitions) refer to the size of bounding box.

有任何解决方法吗？

推荐答案

我不认为有一个纯CSS解决方案。
我的方法是用JavaScript计算包装元素的宽度和子元素的宽度之间的关系，然后将其乘以你的目标X值：

I don't think there's a CSS-only solution. My approach is calculating the relation between the width of the wrapping element and the width of the child with JavaScript before multiplying it with your target X-value:

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

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

Here's a working example of what I mean: http://jsfiddle.net/Whre/7qhnA/2/

这篇关于transform3d（）：使用百分比在父对象内移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！