1

次の CSS を使用して div 内に画像があります。

#container {
  margin: auto;
  width: 500px;
}

#container img:hover{
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
}

しかし、画像は単にまったく動いていません。Chrome コンソールで確認しましたが、CSS エラーはありません。

私が間違っていることを誰かが知っていますか？

4

1 に答える 1

3

360 度回転しているため、何も起こりません (360 度は完全な円であるため)。おそらく達成しようとしているのは、この回転をアニメーション化して見えるようにすることです。このためには、css でトランジションを設定する必要があります。

#container {
  margin: auto;
  width: 500px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#container img:hover{
  -webkit-transform: rotate(360deg); 
  -moz-transform: rotate(360deg); 
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg); 
}
于 2013-11-06T10:56:41.047 に答える