css实现鼠标移位图标旋转效果

鼠标加速图标旋转效应经常用在企业项目，尤其是在顶部导航栏，如：

接下来是使用CSS来实现鼠标移动图标的旋转效果。

DIV，IMG，体{
保证金：0；
填充：0；
}
箱{。
身高：150px；
宽度：300px；
背景：# 1b7b80；
保证金：0汽车；
填料：20px；
}
盒子：img {盘旋。
变换：旋转（180deg）；
WebKit的变换：旋转（180deg）；
-moz变换：旋转（180deg）；
- o-transform：旋转（180deg）；
MS：旋转变换（180deg）；
}
img {
保证金：0汽车；
显示块；
过渡：在所有0.2s缓解；
WebKit的转型：在所有0.2s缓解；
-moz过渡：在所有0.2s缓解；
- O转换：在所有0.2s缓解；
}

这儿有个盒子。盒子里有一幅画。为了看的更清楚，一个更大的图片放在这里，现在要达到的效果是，当鼠标移动到图标。箱盒，IMG将做180度旋转。

在风格上，关键是IMG的设置框：悬停IMG。首先，我们需要设置转换属性IMG首先在属性中指定的方式和时间的动画。然后到。箱设置当鼠标移动时的动作：IMG悬停180度旋转：

变换：旋转（180deg）；

下面的设置，如WebKit的，主要是建立与供应商的浏览器兼容。

所得结果如下图所示。

以上是由萧边引入的CSS实现鼠标图标的旋转效果，希望能帮助你。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。