悬停时旋转或旋转图像答案

【问题标题】：Spin or rotate an image on hover悬停时旋转或旋转图像
【发布时间】：2014-07-04 21:29:27
【问题描述】：

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

img {
  border-radius: 50%;
}

&lt;img src="http://i.imgur.com/3DWAbmN.jpg" /&gt;

【问题讨论】：

标签： css hover css-transitions css-transforms

【解决方案1】：

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

旋转图片：

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

&lt;img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/&gt;

这是一个小提琴DEMO

更多信息和参考：

MDN 上的 CSS 过渡指南
MDN 上的 CSS 转换指南
caniuse.com 上二维变换的浏览器支持表
caniuse.com 上转换的浏览器支持表

【讨论】：

它在 Firefox 中有效，但在 Chrome 中无效。我使用了一个类似的代码，但突然它在 Chrome 中不起作用......你知道发生了什么吗？
@ccsakuweb 您使用的是哪个版本的 chrome？它适用于我在最新的 chrome 中，根据canIuse 它应该适用于 chrome 回到版本 4。
我的版本是Versión 40.0.2214.111 m，我的问题是动画不起作用，但在firefox中可以。
@ccsakuweb 我不明白，我在 Windows 7 上的版本和你一样，它在我发布的 sn-p 中运行良好：图像在悬停时旋转 360 度。
@TimKrul 你在说什么问题？

【解决方案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;
}

【讨论】：

也许应该有transition: NUMBER METHOD 而不是METHOD NUMBER

【解决方案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);
  }
}

【讨论】：

【解决方案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>

Fiddle this

【讨论】：

【解决方案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>

【讨论】：