麦子学院 2017-08-04 18:11

如何使用 css3 transform 属性来变换背景图？

回复:0 查看:2435

本文和大家分享的主要是使用 css3 transform 属性来变换背景图相关内容，一起来看看吧，希望对大家学习css3有所帮助。

　　使用 css3 transform 属性可以轻易的旋转，倾斜，缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。如果你要在黑莓浏览器或者 UC 浏览器使用这个属性，你需要加 -webkit- 前缀。

　　#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) 0 0 repeat;

　　-webkit-transform: rotate(30deg);

　　transform: rotate(30deg);

　　}

　　需要注意的是，在变换的过程中，你需要去调整伪类元素的 width height position 属性. 例子：假如伪类元素使用了一张可重复的图片做背景，那么旋转区域就必须大于父元素，这样才可以在旋转过程中覆盖整个父元素.