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

Posted

技术标签:

【中文标题】如何使图像在悬停css上旋转【英文标题】：How to make image rotate on hover 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" ></a></div>
            <div id="instagram"><a href="http://www.instagram.com/"><img src="Instagram.png" ></a></div>
            <div id="twitter"><a href="http://www.twitter.com/"><img src="Twitter.png" ></a></div>
            <div id="youtube"><a href="http://www.youtube.com/"><img src="Youtube.png" ></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);

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

【问题讨论】：

您好，请查看***.com/questions/23695090/… 【参考方案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" ></a></div>
        <div id="instagram"><a href="http://www.instagram.com/"><img src="Instagram.png" ></a></div>
        <div id="twitter"><a href="http://www.twitter.com/"><img src="Twitter.png" ></a></div>
        <div id="youtube"><a href="http://www.youtube.com/"><img src="Youtube.png" ></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);

【讨论】：

以上是关于如何使图像在悬停css上旋转的主要内容，如果未能解决你的问题，请参考以下文章

在图像悬停时更改为另一个图像？

如何使图像悬停在css中？

使图像出现在链接悬停css上

Html和CSS如何使具有悬停效果的图像成为超链接

css 背景图像的简单CSS旋转。可用于元素状态更改（打开，单击，悬停等）

如何使图像围绕静态徽标旋转？