CSS 悬停时旋转或旋转图像

Spin or rotate an image on hover

提问by user3597950

I want to find out how to make a spinning or rotating imagewhen it is hovered. I would like to know how to emulate that functionality with CSSon the following code :

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

img {
  border-radius: 50%;
}

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

回答by web-tiki

You can use CSS3 transitions with rotate()to spin the image on hover.

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

Rotating image :

旋转图像：

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

Here is a fiddle DEMO

这是一个小提琴演示

---

---

More info and references :

更多信息和参考：

• a guide about CSS transitions on MDN
• a guide about CSS transforms on MDN
• browser support table for 2d transforms on caniuse.com
• browser support table for transitions on caniuse.com

• MDN 上的CSS 转换指南
• MDN 上的CSS 转换指南
• caniuse.com上用于 2d 转换的浏览器支持表
• caniuse.com上用于转换的浏览器支持表

回答by s0h3ck

It's very simple.

这很简单。

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

1. 您添加图像。

2. 您为此图像创建了一个 css 属性。

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

3. 您添加这样的动画：

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

回答by Kyle

if you want to rotate inline elements, you should set the inline element to inline-blockfirst.

如果要旋转内联元素，则应将内联元素设置为inline-blockfirst。

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

回答by M. Lak

here is the automatic spin and rotating zoom effect using css3

这是使用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>

Here is the demo

这是演示

回答by ColdTuna

Here is my code, this flips on hover and flips back off-hover.

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

CSS:

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:

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

摆弄这个