悬停时旋转或旋转图像

小编典典

悬停时旋转或旋转图像

css

我想找出悬停时如何制作 旋转或旋转的图像 。我想知道如何在以下代码上使用 CSS 模仿该功能：

img {

  border-radius: 50%;

}


<img src="http://i.imgur.com/3DWAbmN.jpg" />

阅读 255

2020-05-16

共1个答案

小编典典

您可以将CSS3过渡与rotate()一起使用，以 在悬停时旋转图像 。

旋转图像：

img {

  border-radius: 50%;

  -webkit-transition: -webkit-transform .8s ease-in-out;

          transition:         transform .8s ease-in-out;

}

img:hover {

  -webkit-transform: rotate(360deg);

          transform: rotate(360deg);

}


<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>

2020-05-16