如何在 HTML 中旋转单个图像？

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>