css3的transform屬性可以縮放、傾斜和旋轉任何元素。在沒有任何浏覽器字首的前提下，這個屬性已經被所有的現代浏覽器所支援。如果想支援黑莓浏覽器和安卓版的uc浏覽器，你就需要添加-webkit-字首了。
完美！然而，當你使用上述代碼時，你會發現元素的内容、邊框、背景圖檔都會發生旋轉。那麼，怎樣才能隻旋轉背景圖檔呢？怎樣才能隻讓元素本身旋轉，而讓其背景圖檔位置固定呢？
目前，w3c還沒有專門變形背景圖檔的屬性。我相信在不久的将來肯定會出現這個非常實用的屬性。但是對于現在想實作相同效果的開發者們來說毫無幫助。
萬幸，這裡有個解決方法。其實，就是一個給父級容器元素before僞元素或者after僞元素添加背景圖檔的hack。這時，我們就可以獨立控制帶有背景圖檔僞元素的變形。
隻變形背景
為了控制僞元素在其父級容器内定位，其父級容器元素必須設定相對定位(position:relative)。為了防止背景溢出，你也需要給容器元素設定overflow:hidden;
現在，我們來建立一個具有可以變形背景的絕對定位的僞元素。将僞元素的層級設定為-1(z-index:-1),保證其不遮蓋内容。
注意，你需要調整僞元素的寬度、高度和定位。比如，當你使用重複圖檔做背景時，旋轉的區域必須比其所在容器面積大，以此保證全部覆寫容器背景。
固定一個變形元素的背景
父級容器上的所有變形樣式都會繼承到其僞元素。是以，我們需要撤銷其僞元素的變形樣式。例如，如果容器旋轉30deg，其僞元素背景必須旋轉-30deg，這樣背景才能固定到某個位置。
當然，你仍然需要調整僞元素背景的尺寸和位置，使其完全覆寫父級容器。
下面是codepen上的相關執行個體：
<a href="https://codepen.io/sitepoint/pen/ngpvwx" target="_blank">https://codepen.io/sitepoint/pen/ngpvwx</a>
這種方法支援所有标準浏覽器、edge、ie9~ie11。在ie8中不會有任何變形樣式，但是背景圖仍然顯示。
ie6和ie7不支援僞元素，是以背景圖不會顯示。然而，為了支援那些古老的浏覽器，你可以直接給容器設定背景圖而不是用先進的選擇器或者一定條件的css将容器的背景設定為空。
大量創造性的應用都用到了css3的變形屬性。您有相關分享嗎？
<a href="http://mp.weixin.qq.com/s?__biz=mjm5oda2mdiyma==&mid=2247483791&idx=1&sn=3157bf5b2ca5436bd2e81077b4e16723&chksm=a6d1c85c91a6414ab148343f87f513971c255f8188a5323eb93e7d1a16b67adb8befb0d6ee9b&mpshare=1&scene=22&srcid=0627vynhl3y5ah2d3rcuqheg#rd" target="_blank">檢視公衆号文章</a>
歡迎關注個人公衆号，檢視更多好文。