有没有办法使用CSS -transform而不会影响儿童元素

Question

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

只是不确定为什么我不能将css转换应用到父元素，并避免将其应用到子元素或至少覆盖它。

让我知道是否有办法使用transform属性获得第一个示例的效果。我不希望第二张图像也被缩放。只是父母的div。

---

注意

我想使用这个属性来实现GPU加速。

Answer 1

我想用-transform来获得GPU的性能特权。我想我会继续使用宽度动画：http://jsfiddle.net/Vyaf3/22/，但应用可以启用GPU加速的css3属性。

Answer 2

还没有在任何其他浏览器中玩过，但铬。

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

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

http://jsfiddle.net/gnrlbzik/5Q8EC/测试溢出设置为自动，保持图像尺寸的机智。

Answer 3

要语义我不认为你应该能够阻止它转换一个子元素，因为你正在转换/缩放它的容器，而不是调整它的大小。变换不仅仅是像框1上的例子那样对宽度进行动画处理，而是对x进行缩放。

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

注意：我不太熟悉webkit用于呈现这些转换的实际技术。非常抱歉，如果渲染的细节不够精确。如果有人能够更好地描述变换的工作原理，我会更新它。