css - 使用CSS同时旋转3个div

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 中，然后将 hover 伪类应用于它。

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/