CSS3的transform屬性可以縮放、傾斜和旋轉任何元素。在沒有任何浏覽器前綴的前提下，這個屬性已經被所有的現代浏覽器所支持。如果想支持黑莓浏覽器和安卓版的UC浏覽器，你就需要添加-webkit-前綴了。

#myelement{ -webkit-transform:rotate(30deg); transform:rotate(30deg); }

完美！然而，當你使用上述代碼時，你會發現元素的内容、邊框、背景圖片都會發生旋轉。那麼，怎樣才能隻旋轉背景圖片呢？怎樣才能隻讓元素本身旋轉，而讓其背景圖片位置固定呢？

目前，W3C還沒有專門變形背景圖片的屬性。我相信在不久的将來肯定會出現這個非常實用的屬性。但是對于現在想實現相同效果的開發者們來說毫無幫助。

萬幸，這裡有個解決方法。其實，就是一個給父級容器元素before僞元素或者after僞元素添加背景圖片的hack。這時，我們就可以獨立控制帶有背景圖片僞元素的變形。

固定一個變形元素的背景

父級容器上的所有變形樣式都會繼承到其僞元素。因此，我們需要撤銷其僞元素的變形樣式。例如，如果容器旋轉30deg，其僞元素背景必須旋轉-30deg，這樣背景才能固定到某個位置。

#myelement{ position:relative; overflow:hidden; -webkit-transform:rotate(30deg); transform:rotate(30deg); } #myelement:before{ content:''; position:absolute; width:200%; height:200%; top:-50%; left:-50%; z-index:-1; background:url(background.png) 0 0 repeat; -webkit-transform:rotate(-30deg); transform:rotate(-30deg); }

當然，你仍然需要調整僞元素背景的尺寸和位置，使其完全覆蓋父級容器。

下面是CodePen上的相關實例：

https://codepen.io/SitePoint/pen/Ngpvwx

這種方法支持所有标準浏覽器、edge、IE9~IE11。在IE8中不會有任何變形樣式，但是背景圖仍然顯示。

IE6和IE7不支持僞元素，因此背景圖不會顯示。然而，為了支持那些古老的浏覽器，你可以直接給容器設置背景圖而不是用先進的選擇器或者一定條件的CSS将容器的背景設置為空。

大量創造性的應用都用到了CSS3的變形屬性。您有相關分享嗎？

本文由大前端學堂編譯出品，原文來自sitepoint，作者Craig Buckler，若轉載請注明出處，轉發感激不盡。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!