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

这篇文章将为大家详细讲解有关css3如何使用transform属性来变换背景图，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联建站自2013年起，是专业互联网技术服务公司，拥有项目成都做网站、成都网站设计、成都外贸网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元丰顺做网站,已为上家服务,为丰顺各地企业和个人服务,联系电话:028-86922220

使用 css3 transform 属性可以轻易的旋转，倾斜，缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。

#myelement {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

这个听起来很赞。然而，这个属性旋转了整个元素，包括他的内容、边框、背景图。如果你只是想旋转它的背景图而不选旋转内容的话，应该怎么做呢？或者你只想旋转内容，而不旋转背景图，这个又该怎么做呢？

我们找到一个解决方式。这个方式本质上，是将背景图应用到某个元素的 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 属性。例子：假如伪类元素使用了一张可重复的图片做背景，那么旋转区域就必须大于父元素，这样才可以在旋转过程中覆盖整个父元素。

在变换的元素上实现固定背景

所有主元素的变换操作都会影响到伪类元素. 假如伪类元素不想要变换操作时，我们就需要撤销这个变换， 例子：当一个父元素旋转了 30 度，那么伪类元素需要相反方向旋转 30 度，来使伪类元素回退到固定位置。

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

}

再次强调，你需要对伪类元素的宽高及定位属性进行调整来确保它可以完全覆盖主元素。

关于“css3如何使用transform属性来变换背景图”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。