css - 使用CSS同时旋转3格

我想同时旋转3格。

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

所有这三个图像都是在鼠标移动时旋转的。

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

最佳答案

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