2

我想同时旋转 3 个 div。

<img src="logo.png" class="logo" width="150px" height="150px"/>
<img src="1.png" class="logo" width="150px" height="150px"/>
<img src="2.png" class="logo" width="150px" height="150px"/>

这三个图像都是在鼠标移动其中任何一个时旋转的。使用的 Css 是

  .logo {
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
  }
  .logo:hover {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
  }
4

3 回答 3

2

您需要将所有图像包装在另一个 div 中，然后将悬停伪类应用于该 div。

HTML

<div id="wrap">
  <img src="logo.png" class="logo" width="150px" height="150px"/>
  <img src="1.png" class="logo" width="150px" height="150px"/>
  <img src="2.png" class="logo" width="150px" height="150px"/>
</div>

CSS：

.logo {
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
 }
 #wrap:hover .logo {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }

jsfiddle：http: //jsfiddle.net/NbzrV/

于 2012-12-06T16:05:08.633 回答
0

请试试这个

<style type="text/css">
    .logo {
      -moz-transform:rotate(10deg); //firefox
      -webkit-transform:rotate(10deg); //Chrome, Safari
      -o-transform:rotate(10deg); //Opera
      }

  .logo:hover {
              -moz-transform:rotate(45deg); //firefox
              -webkit-transform:rotate(45deg); //Chrome, Safari
              -o-transform:rotate(45deg); //Opera
              }


</style>
于 2012-12-06T16:02:55.513 回答
0

将所有图像放在一个容器中，然后将旋转应用于悬停容器中的图像：

<div id="container">
    <img src="logo.png" class="logo" width="150px" height="150px"/>
    <img src="1.png" class="logo" width="150px" height="150px"/>
    <img src="2.png" class="logo" width="150px" height="150px"/>
</div>

CSS：

  .logo {
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
  }
  #container:hover .logo {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
  }
于 2012-12-06T16:06:43.370 回答