Question

我想同时旋转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);
  }

Answer 1

你需要将所有图像包装在另一个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/

Answer 2

请试试这个

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

Answer 3

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

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

使用css同时旋转3 div

3 个答案: