有没有办法使用CSS -transform而不影响子元素

Question

我创建了一个mockup来证明我的问题。我担心解决方案会落在我对第一个例子（box1）所做的事情上。

我不知道为什么我不能将css转换应用于父元素，并避免将其应用于子元素或至少覆盖它。

如果有办法使用transform属性获取第一个示例的效果，请告诉我。我不希望第二个图像缩放。只是父div。

---

注意

我正在尝试使用此属性来启用GPU加速。

Answer 1

除了Chrome之外，没有在任何其他浏览器中玩过这个。

但看起来父元素上的溢出隐藏设置意味着调整图像上的继承。

因此，如果在应用动画的框上设置溢出自动，则应修复调整大小继承。

http://jsfiddle.net/gnrlbzik/5Q8EC/测试溢出设置为auto，以保持图像尺寸。

Answer 2

为了保持语义我不认为你应该能够阻止它转换子元素，因为你正在转换/缩放它的容器，而不是调整它的大小。变换不仅像第1个框中的示例那样动画宽度，而是缩放x。

我相信这个问题是关于尝试通过使用GPU处理动画的功能来提升性能。我相信，这可以通过有效地将元素视为GPU然后动画的图像来实现。因此，您无法在动画中动态保持其大小/形状。也许有一种方法可以通过转换你希望保持静态的元素来对抗动画，但这可能不会有效也不会有效。

注意：我不熟悉webkit用于呈现这些转换的实际技术。很抱歉，如果渲染的细节不太准确。如果有人评论更好地描述了转换是如何工作的，我会更新这个。

Answer 3

我想使用-transform来获得GPU性能优势。我想我将继续使用宽度动画：http://jsfiddle.net/Vyaf3/22/但是应用了一个可以启用GPU加速的css3属性。