有没有一种方法可以使用CSS-transform而不影响子元素？

Question

我创建了一个模型来展示我的问题，链接在这里：mockup。我担心解决方案就像我在第一个例子(box1)中所做的那样。

我不确定为什么不能将CSS变换应用于父元素并避免将其应用于子元素，或者至少覆盖它。如果有办法使用transform属性获得第一个示例的效果，请告诉我。我不想缩放第二个图像，只想缩放父div。

注意：我正在尝试使用此属性启用GPU加速。

- mikevoermans

---

将.overflow设置为auto，应用于.box1和.box2。 - GnrlBzik

你希望图像保持固定尺寸，位于动画 div 上方吗？ - Codrin Eugeniu

http://jsfiddle.net/gnrlbzik/5Q8EC/ 请告诉我这是否是你想要实现的效果？ - GnrlBzik

Answer 1

我在其他浏览器中没有使用过这个功能，但在Chrome中看起来父元素设置为溢出隐藏会导致图像的大小继承问题。因此，如果您将应用动画的盒子设置为自动溢出，则应该可以解决大小继承问题。链接http://jsfiddle.net/gnrlbzik/5Q8EC/测试了设置为自动溢出的效果，可以保持图像尺寸不变。

- GnrlBzik

---

我实际上添加了另一个div，因为我不能让滚动条显示出来：http://jsfiddle.net/5Q8EC/8/ 谢谢你给我的线索。有趣的是溢出如何影响继承。 - mikevoermans

是的，我也在考虑另一个包装器，担心那些讨厌的滚动条 :) - GnrlBzik

抱歉 - 乍一看我没有意识到你改变了动画。整个重点在于继续使用 CSS 变换。将其更改为宽度只会将其移动到我第一个示例中的位置。再次抱歉。 - mikevoermans

我想我会使用宽度动画 - 但使用不同的（不显眼的）属性来启用GPU性能。感谢您的辛勤工作 - 将您的答案保持为+1，但现在 - 只是使用我发布的fiddle作为解决方案。 - mikevoermans

说实话，scale() 在阅读了相关资料之后，看起来似乎没有办法，至少在这个实现中，它会缩放整个父/子节点关系，因此所有的子节点都会被缩放...有趣...虽然很合理。 - GnrlBzik

Answer 2

为了语义化，我认为在你转换/缩放其容器而不是调整大小时，不应该停止它转换子元素。变换不仅仅像盒子1上的示例一样动画化宽度，它还会缩放x。

我认为这个问题是关于尝试通过使用GPU处理动画的功能来获得一些性能提升。我相信，这是通过有效地将元素视为GPU然后对其进行动画处理来实现的。因此，在动画过程中，您无法使内部元素保持其大小/形状动态。也许有一种方法可以通过在内部转换要保持静态的元素来抵消动画，但这可能既不高效也不有效。

注意：我对webkit用于呈现这些变换的实际技术并不很熟悉。如果有人用更好的描述说明变换如何工作，我会更新这个内容。

- gokujou

---

你说得很准确 - 我正在使用它来获得GPU性能优势。也许我只是欺骗它使用它。 - mikevoermans

是的，缩放会按照预期的方式进行，可以缩放父级及其子级。 - GnrlBzik

Answer 3

我想使用-transform来获得GPU性能提升。我想我会继续使用宽度动画： http://jsfiddle.net/Vyaf3/22/，但是应用一个CSS3属性，以实现GPU加速。

- mikevoermans