在鼠标悬停时旋转图像

Question

我想了解如何在鼠标悬停时使图像旋转或转动。我想知道如何使用CSS在以下代码中模拟该功能：

我希望找到如何在鼠标悬停时使图像旋转或转动的方法。我想了解如何在以下代码中使用CSS模拟该功能：

img {
  border-radius: 50%;
}

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

- user3597950

Answer 1

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

旋转图像：

img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}

<img src="https://istack.dev59.com/BLkKe.webp" width="100" height="100"/>

这里有一个演示 DEMO

---

更多信息和参考资料：

• 有关CSS过渡的指南在MDN
• 有关CSS变换的指南在MDN
• 2D转换浏览器支持表在caniuse.com
• 过渡效果浏览器支持表在caniuse.com

- web-tiki

---

@ccsakuweb 你使用的是哪个版本的Chrome浏览器？在我最新版本的Chrome中它可以正常工作，并且根据canIuse的数据，它应该可以在Chrome 4版本及以上的浏览器中正常工作。 - web-tiki

我已经向使用与我相同版本的其他人询问过，他们的动画也无法正常工作。但是之前的版本40.0.2214.96 m可以正常工作。我有一个朋友使用开发版本，它可以正常工作。所以这一定是一个暂时性问题。希望如此。非常感谢您的回复。 - ccsakuweb

@TimKrul 你在谈论什么问题？ - web-tiki

实际上在垃圾回收中，边框半径不能很好地被执行。即使鼠标指针在圆形外部悬停时，在元素框内部的转换也会被触发。为了解决这个问题，您应该使用带有背景图像的 div。 - Max Payne

此外，还有一个非常棒的 CSS 缓动工具，可以为 CSS 动画注入生命：http://matthewlein.com/ceaser/ - phlidd

Answer 2

这非常简单。

1. You add an image.

2. You create a css property to this image.

   img { transition: all 0.3s ease-in-out 0s; }
   

3. You add an animation like that:

   img:hover
   {
       cursor: default;
       transform: rotate(360deg);
       transition: all 0.3s ease-in-out 0s;
   }
   

- s0h3ck

---

或许应该使用transition: NUMBER METHOD而不是METHOD NUMBER。 - T.Todua

Answer 3

如果您想旋转内联元素，您需要先将内联元素设置为inline-block。

i {
  display: inline-block;
}

i:hover {
  animation: rotate-btn .5s linear 3;
  -webkit-animation: rotate-btn .5s linear 3;
}

@keyframes rotate-btn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

- Kyle

Answer 4

以下是我的代码，它会在鼠标悬停时翻转并在悬停结束时恢复原样。

CSS：

.flip-container {
  background: transparent;
  display: inline-block;
}

.flip-this {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-container:hover .flip-this {
  transition: 0.9s;
  transform: rotateY(180deg);
}

HTML：

<div class="flip-container">
    <div class="flip-this">
        <img width="100" alt="Godot icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Godot_icon.svg/512px-Godot_icon.svg.png">
    </div>
</div>

点此可进行在线编辑

- Caio Mar

Answer 5

这是使用CSS3实现的自动旋转和缩放效果。

#obj1{
    float:right;
    width: 96px;
    height: 100px;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
    animation-delay:2s;
    background-image:url("obj1.png");
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE 9 */
    margin-bottom: 70px;
}

#obj2{
    float:right;
    width: 96px;
    height: 100px;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
    animation-delay:2s;
    background-image:url("obj2.png");
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE 9 */
    margin-bottom: 70px;
}

#obj6{
    float:right;
    width: 96px;
    height: 100px;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
    animation-delay:2s;
    background-image:url("obj6.png");
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE 9 */
    margin-bottom: 70px;
}

/* Standard syntax */
@keyframes mymove {
    50% {transform: rotate(30deg);
}

<div style="width:100px; float:right; ">
    <div id="obj2"></div><br /><br /><br />
    <div id="obj6"></div><br /><br /><br />
    <div id="obj1"></div><br /><br /><br />
</div>

- M. Lak