我想了解如何制作旋转或旋转图像当它悬停时。我想知道如何模拟该功能CSS关于以下代码:
img {
border-radius: 50%;
}
<img src="http://i.imgur.com/3DWAbmN.jpg" />
您可以使用 CSS3 过渡rotate()
to 悬停时旋转图像.
旋转图像:
img {
transition: transform .7s ease-in-out;
}
img:hover {
transform: rotate(360deg);
}
<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>
这是一个小提琴DEMO
更多信息和参考:
- 有关 CSS 过渡的指南MDN
- 关于 CSS 转换的指南MDN
- 二维变换的浏览器支持表caniuse.com
- 转换的浏览器支持表caniuse.com
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)