Question

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

img {
  border-radius: 50%;
}

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

Answer 1

您可以使用rotate()的CSS3过渡到悬停时旋转图像。

旋转图像：

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"/>

这是一个小提琴DEMO

更多信息和参考：

有关MDN
有关MDN
caniuse.com
caniuse.com

Answer 2

这很简单。

您添加图片。

您为此图片创建了一个css属性。

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

您可以添加这样的动画：

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

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);
  }
}

Answer 4

这是使用css3

的自动旋转和旋转缩放效果

<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>

BigInteger result = a.remainder(b);

以下是demo

Answer 5

这是我的代码，它会在悬停时翻转，并在悬停时翻转回来。

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>

Fiddle this

在悬停时旋转或旋转图像

5 个答案:

旋转图像：