2

3divを同時に回転させたい。

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

これらの 3 つの画像はすべて、マウスがそれらのいずれかに移動すると回転します。使用される 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 でラップし、代わりにホバー疑似クラスを適用する必要があります。

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

すべての画像をコンテナに入れ、ホバーしたコンテナ内の画像に回転を適用します。

<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 に答える
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 に答える