如何使图像在悬停css上旋转答案

【问题标题】：How to make image rotate on hover css如何使图像在悬停css上旋转
【发布时间】：2017-06-26 14:05:35
【问题描述】：

我想让页面页脚上的社交媒体图标在悬停时旋转。我在每个社交媒体图标上放置了一个标签包装器和单独的标签。在 CSS 上，我使用了 '.wrapper' 函数，但是当我在 CSS 上执行 '.wrapper:hover' 时，它无法识别 ':hover' 部分。

我不知道我写错了什么？有人可以帮忙吗。

非常感谢

HTML

        <div class="footer">
        <div id="footer-header">
            <p>Keep Up With Us...</p>
        </div>
        <center><div class="social-wrapper">
            <div id="facebook"><a href="http://www.facebook.com"><img src="Facebook.png" alt="Facebook"></a></div>
            <div id="instagram"><a href="http://www.instagram.com/"><img src="Instagram.png" alt="Instagram"></a></div>
            <div id="twitter"><a href="http://www.twitter.com/"><img src="Twitter.png" alt="Twitter"></a></div>
            <div id="youtube"><a href="http://www.youtube.com/"><img src="Youtube.png" alt="Youtube"></a></div>
        </div></center>
        <div id="tag-branding">
            <img src="tag.png">
        </div>
    </div>

CSS

.footer {padding: 376px 0px 0px 0px;}
#footer-header {text-align: center; font-family: 'Raleway'; font-weight: 500; font-size: 29px; line-height: 0; margin: 0;}
#facebook {display: inline; margin: 0px 5px 0px 0px;}
#instagram {display: inline; margin: 0px 5px 0px 0px;}
#twitter {display: inline; margin: 0px 5px 0px 0px;}
#youtube {display: inline; margin: 0px 5px 0px 0px;}

#tag-branding {
  padding: 99px 50px 0px 0px;
 }
.social-wrapper {border-radius:50%; -webkit-transition: -webkit-transform .8s ease-in-out; -ms-transition: -ms-transform .8s ease-in-out; transition: transform .8s ease-in-out;}
social-wrapper:hover {transform:rotate(360deg); -ms-transform:rotate(360deg); -webkit-transform:rotate(360deg);}

如果你能指出你改变了什么，如果你这样做了，我将不胜感激，这样我将来可以学习。

【问题讨论】：

您好，请查看stackoverflow.com/questions/23695090/…

标签： html css

【解决方案1】：

在社交包装类的 CSS 代码中，您只需要在 .social-wrapper:hover 前面加上一个句点来说明它正在修改社交包装类。

这对我有用：

.social-wrapper {
  border-radius:50%; 
  -webkit-transition: -webkit-transform .8s ease-in-out; 
  -ms-transition: -ms-transform .8s ease-in-out; 
  transition: transform .8s ease-in-out;
  display: inline;
}

.social-wrapper:hover {
  transform:rotate(360deg); 
  -ms-transform:rotate(360deg); 
  -webkit-transform:rotate(360deg); 
}

但是，如果您可能想让各个链接轮换，您还需要稍微修改您的代码。因为您将所有标签都包装在 .social-wrapper 类中，所以它将旋转整个图标部分。要解决这个问题，您只需将每个单独的图标包装在 .social-wrapper 类中。

【讨论】：

【解决方案2】：

悬停时在 css 中旋转图像

h1 {
  color: #222;
  text-align: center;
  font-size: 40px;
}

h2 {
  color: #222;
  text-align: center;
}

img {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  width: 250px;
  height: 150px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

img:hover {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

<body bgcolor="#333">
  <h1>-webkit-transform: rotate(180deg);</h1>
  <h2>Hover to see the effect</h2>
  <img src="http://www.hdwallpapers.in/walls/lion-wide.jpg">
  <h2>To get it so it works in all web broswers:</h2>
  <h2>Mozilla firefox: -moz-transform: rotate(180deg);
    <br>
  Opera: -o-transform: rotate(180deg);
    <br>
 Internet Explorer: -ms-transform: rotate(180deg);
    <br>
    CSS3: transform: rotate(180deg);</h2>
  <br>
<h2>The animation:</h2>
<h2>CSS3: transition: 0.70s;
  <br>
  Chrome/Safari: -webkit-transition: 0.70s;
  <br>
  Mozilla firefox: -moz-transition: 0.70s;
  <br>
  Internet Explorer: -ms-transition: 0.70s;
  <br>
  Opera: -o-transition: 0.70s;</h2>
  <h2>More pens coming soon</h2>

演示：https://codepen.io/ImageHoverEffects/pen/GfJLg

【讨论】：

【解决方案3】：

HTML

<div class="footer">
    <div id="footer-header">
        <p>Keep Up With Us...</p>
    </div>
    <center><div class="social-wrapper">
        <div id="facebook"><a href="http://www.facebook.com"><img src="Facebook.png" alt="Facebook"></a></div>
        <div id="instagram"><a href="http://www.instagram.com/"><img src="Instagram.png" alt="Instagram"></a></div>
        <div id="twitter"><a href="http://www.twitter.com/"><img src="Twitter.png" alt="Twitter"></a></div>
        <div id="youtube"><a href="http://www.youtube.com/"><img src="Youtube.png" alt="Youtube"></a></div>
    </div></center>
    <div id="tag-branding">
        <img src="tag.png">
    </div>
</div>

CSS

.footer {padding: 376px 0px 0px 0px;}
#footer-header {text-align: center; font-family: 'Raleway'; font-weight: 500; font-size: 29px; line-height: 0; margin: 0;}
#facebook {display: inline; margin: 0px 5px 0px 0px;}
#instagram {display: inline; margin: 0px 5px 0px 0px;}
#twitter {display: inline; margin: 0px 5px 0px 0px;}
#youtube {display: inline; margin: 0px 5px 0px 0px;}

.social-wrapper img {border-radius:50%; -webkit-transition: -webkit-transform .8s ease-in-out; -ms-transition: -ms-transform .8s ease-in-out; transition: transform .8s ease-in-out;} 

.social-wrapper img:hover {transform:rotate(360deg); -ms-transform:rotate(360deg); -webkit-transform:rotate(360deg);}

现在试试上面的 css 代码，它工作正常。

对于演示，您可以查看以下内容：您可以使用 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);
}

【讨论】：