CSS图标设置旋转效果
.icon { display: inline-block; transform: rotate(0deg); transition: transform 0.5s ease-in-out; } .icon:hover { transform: rotate(45deg); }
上面的代码可以在CSS中将一个图标旋转45度。首先,我们使用transform
属性来将图标旋转到0度。然后,我们使用transition
属性来指定过渡效果,以便在鼠标悬停时改变图标的旋转程度。最后,我们使用CSS伪类:hover
来触发旋转效果。
这些代码可以应用于任何需要旋转图标的情况。只需将.icon
替换为相应的类或选择器即可。