网站建设知识
css如何给图片转动
2025-07-11 12:40  点击:0

CSS可以很方便地实现给图片旋转的效果。在CSS中,我们用transform属性来控制元素的旋转。

img{transform: rotate(20deg);}

上面这段代码表示将img元素旋转20度。我们可以通过更改旋转的度数来控制图片的不同角度。

如果要实现旋转动画,我们可以使用CSS的动画功能。下面是一个简单的例子:

img{animation: spin 2s linear infinite;}@keyframes spin {100% {transform: rotate(360deg);}}

这段代码表示将img元素以线性方式旋转2秒钟并且无限次重复,关键帧spin在100%处将图片旋转360度。

至此,我们已经可以用简单的代码实现图片的旋转。通过不同的旋转方式和动画效果,我们可以为图片增加更多的视觉效果,让网页更加生动有趣。