使用css3transform属性可以轻松旋转、倾斜、缩放任何元素。目前在大多数浏览器中运行良好，即使没有任何前缀。#myelement{-webkit-transform:rotate(30deg);transform:rotate(30deg);}这听起来很棒。但是，此属性会旋转整个元素，包括其内容、边框和背景图像。如果你只是想旋转它的背景图片而不选择内容怎么办？或者你只是想旋转内容，而不是背景图片，怎么办？目前没有关于如何旋转背景图像的W3C提案。我认为这是一个很常见的使用场景，我相信相关的提案最终会出来，但对于目前想要实现这种效果的开发者来说没有意义。幸运的是，我们找到了解决方法。从本质上讲，这种方法是将背景图像应用到伪类元素，例如元素的before或after，而不是将它应用到元素本身。然后在伪类元素上独立使用transform属性。只要改变背景这个元素可以使用任何样式，但是一定要设置position属性，因为它的伪类元素会根据它来定位。如果不希望背景突出元素，需要设置overflow:hidden。#myelement{position:relative;overflow:hidden;}现在我们可以创建一个绝对定位的伪元素来实现变换背景。为保证显示在元素内容下方，需要设置z-index：-1。#myelement:before{content:"";position:absolute;width:200%;height:200%;top:-50%;left:-50%;z-index:-1;background:url(background.png)00repeat;-webkit-transform:rotate(30deg);transform:rotate(30deg);}需要注意的是，在变换过程中，需要调整伪类的width、height、position属性元素。示例：如果伪类元素使用可重复的图片作为背景，那么旋转区域必须大于父元素，这样才能在旋转时覆盖整个父元素。在转换后的元素上实现固定背景。主元素的所有变换操作都会影响到伪类元素。如果伪类元素不想进行变换操作，我们需要撤销变换。例子：当一个父元素旋转了30度，那么这个伪元素需要反方向旋转30度，才能让这个伪元素回落到一个固定的位置。#myelement{position:relative;overflow:hidden;-webkit-transform:rotate(30deg);transform:rotate(30deg);}#myelement:before{content:"";position:absolute;width:200%;height:200%；顶部：-50%；左侧：-50%；z-index：-1；背景：url(background.png)00重复；-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}同样，您需要调整伪元素的宽度、高度和定位属性，以确保它完全覆盖主元素。看看CodePen上写的DEMO：Usecss3propertiestotransformbackgroundimages。
