[分享]css3怎么旋转背景图片

CSS3是前端开发人员常用的技术之一，可以用来实现炫酷的效果。在其中，旋转背景图片是一个常见的需求。那么我们该如何通过CSS3实现呢？接下来我们来演示一下：/首先定义一个div/ div{ backg...

CSS3是前端开发人员常用的技术之一，可以用来实现炫酷的效果。在其中，旋转背景图片是一个常见的需求。那么我们该如何通过CSS3实现呢？接下来我们来演示一下：

/*首先定义一个div*/
div{
    background:url('bg.jpg') no-repeat center center;
    background-size:cover;
    width:500px;
    height:300px;
}

/*使用CSS3进行旋转*/
div:hover{
    transform:rotate(45deg);
} 

上面的代码中，我们首先定义了一个样式，它包含了一个背景图片，并且指定它居中显示，同时覆盖整个div。接着，我们使用了CSS3的transform属性，在鼠标悬停在div上的时候，旋转这个div。我们指定旋转的角度为45度，使得背景图片以一个斜角显示。

总之，通过使用CSS3的transform属性，我们可以很容易地实现旋转背景图片的效果。如果你还没有掌握CSS3的transform属性，那么就赶紧学习起来吧，它将为你的前端工作带来很多惊喜。