变换：缩放和溢出：Chrome 中的隐藏问题
使用 CSS3 变换：缩放时，会出现一个特殊问题。如果父 div 已溢出：隐藏并应用了 border-radius，则缩放子 div 会导致其超出其父级。
问题描述
此问题发生在以下情况使用transform:scale来缩放div内的图像。当父div上设置了overflow:hidden和border-radius时，缩放后的图像会溢出其边界。
过渡问题
最初认为添加一个CSS 转换可以解决这个问题。然而，这种方法被证明是无效的。
解决方案
这个问题的解决方案在于对包装元素应用transform:translateZ(0)。此 CSS 属性强制硬件加速，从而提高渲染性能并消除溢出问题。
工作原理
使用变换：translateZ(0) 触发硬件加速GPU，允许浏览器利用专用图形资源进行渲染。这提高了转换的效率和准确性，防止图像溢出其容器。
有关此技术的更多信息以及转换：translateZ(0) 的性能影响，请参阅提供的 CSS 性能文章。
以上是为什么在 Chrome 中使用'overflow:hidden”和'border-radius”缩放子 Div 会溢出父 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！
