有没有一种方法可以使用CSS转换而不影响子元素

我创建了一个示例来演示我的问题。我担心解决方案会落在我对第一个示例（框1）所做的事情中

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

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

---

注意

---

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

除了chrome之外，其他浏览器都没有使用过此属性

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

因此，如果在应用动画的长方体上设置“溢出自动”，则应修复大小调整继承

---

测试溢出设置为“自动”，以保持图像尺寸的精确性。

从语义上讲，我认为您不应该阻止它转换子元素，因为您正在转换/缩放它的容器，而不是调整它的大小。变换不仅仅是像框1上的示例那样设置宽度的动画，它还可以缩放x

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

---

注意：我不太熟悉webkit用于呈现这些转换的实际技术。如果渲染的更精细细节不太准确，那么很抱歉。如果有人对transform的工作原理有更好的描述，我将更新此内容。

我想使用-transform获得GPU性能特惠。我想我会继续使用宽度动画：但是通过应用css3属性来启用GPU加速。

将溢出设置为自动打开。box1、.box2是否希望图像在动画div上方保持固定尺寸？让我知道这是否是你想要达到的效果？我实际上添加了另一个div，因为我无法显示滚动条：谢谢你给我的线索。有趣的是溢出如何影响继承。是的，我也在考虑另一个包装器，担心那些讨厌的滚动条：）对不起-乍一看我没意识到你改变了动画。关键是要继续使用CSS转换。将其更改为宽度实际上只是将其移动到第一个示例中的位置。再一次，对此表示抱歉。我想我将使用宽度动画-但是使用不同的（不引人注目的）属性来启用GPU性能。感谢您的辛勤工作-保持您的答案为+1，但现在-只需使用我发布的小提琴作为解决方案。说实话，scale（），在阅读了它之后，看起来没有办法，至少在这个实现中，因为它可以扩展整个父/子节点关系，因此所有的子节点。。。有趣的。。。虽然有道理。你是准确的-我用这个来获得GPU性能津贴。所以也许我只是骗它使用它。是的，scale做它认为应该做的，scale父母和孩子。