css 背景图片旋转 |html css 内联元素

.background-img{
background-image: url("your-image.jpg"); /*设置背景图片*/
background-repeat: no-repeat; /*防止重复*/
background-size: cover; /*尽可能铺满容器*/
transition: transform 0.8s ease-in-out; /*设置旋转效果*/
}
.background-img:hover{
transform: rotate(60deg); /*鼠标悬停旋转60度*/
}

上述代码是实现背景图片旋转效果的核心代码。其中，大家使用了CSS3的transform属性来实现旋转特效。同时，大家使用了transition属性来控制旋转的过渡效果。

需要注意的是，大家只对鼠标悬停后的状态进行旋转，而不是一直旋转。这样可以防止页面出现过多的动画效果，从而影响用户的使用体验。

总的来说，通过CSS的transform属性，大家可以轻松实现背景图片的旋转效果，从而为页面带来更多的趣味性和动感。如果你也对前端开发有兴趣，不妨试试这一技巧吧！