HTMLで1つのイメージを回転するにはどうすればよいですか？

Question

作成したテーブルで3枚の画像を回転したいと思います。私はこの投稿に画像を追加しました。私はそのようにする方法を学ぶのに苦労しており、何も見つけられません。私はそれを継続的に回転させたい。回転は、その軸上を回転する惑星の回転と同じでなければならない。 BARCELONA

<table> 
 
    <tr> 
 
     <th colspan="2"><h3>Favorite Teams</h3></th> 
 
    </tr> 
 
    <tr> 
 
     <th>Team</th> 
 
     <th>What sport?</th> 
 
     <th>Logo</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Pittsburgh Steelers</th> 
 
     <th>American Football</th> 
 
     <th><img src="steelers.jpg" height="100"></th> 
 
    </tr> 
 
    <tr> 
 
     <th>Michigan Wolverines</th> 
 
     <th>American Football</th> 
 
     <th><img src="wolverines.jpg" height="100"></th> 
 
    </tr> 
 
    <tr> 
 
     <th>FC Barcelona</th> 
 
     <th>Football</th> 
 
     <th><img src="barcelona.jpg" height="100"></th> 
 
    </tr> 
 
</table>

Answer 1

これは、画像を回転します。 CSS3 Rotate Animation

.rotate { 
 
    -webkit-transform: rotate(20deg); 
 
    transform: rotate(20deg); 
 
}

<table> 
 
     <tr> 
 
      <th colspan="2"><h3>Favorite Teams</h3></th> 
 
     </tr> 
 
     <tr> 
 
      <th>Team</th> 
 
      <th>What sport?</th> 
 
      <th>Logo</th> 
 
     </tr> 
 
     <tr> 
 
      <th>Pittsburgh Steelers</th> 
 
      <th>American Football</th> 
 
      <th><img class="rotate" src="steelers.jpg" height="100"></th> 
 
     </tr> 
 
     <tr> 
 
      <th>Michigan Wolverines</th> 
 
      <th>American Football</th> 
 
      <th><img class="rotate" src="wolverines.jpg" height="100"></th> 
 
     </tr> 
 
     <tr> 
 
      <th>FC Barcelona</th> 
 
      <th>Football</th> 
 
      <th><img class="rotate" src="barcelona.jpg" height="100"></th> 
 
     </tr> 
 
    </table>