有沒有辦法使用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用於呈現這些轉換的實際技術。非常抱歉，如果渲染的細節不夠精確。如果有人能夠更好地描述變換的工作原理，我會更新它。