How to rotate a single image in HTML?

Question

I would like to rotate 3 images in a table I created. I have added the images to this post. I am having a hard time learning how to do so and I can't find anything on it. I would like it to rotate continuously. The rotation should be like that of a planet rotating on its axis. 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>

Hi! Have a look at that link, it is well explained: https://stackoverflow.com/questions/17411991/html5-canvas-rotate-image — Allan, Nov 06 '17 at 01:51
can you present a gif or example site to show how you expect the animation would look like? — Josh Lin, Nov 06 '17 at 01:54

user2182349 · Answer 1 · 2017-11-06T02:01:14.263

This will rotate the images.

If you would like to animate the rotation - see this answer: 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>

*but not too fast* the OP said. Add a transition would be better. — JJPandari, Nov 06 '17 at 02:01

How to rotate a single image in HTML?

1 Answers1