图像旋转180度？

Question

我只是一个初学者，所以我真的不知道如何做很多这种CSS样式。

我需要使此（gif）旋转180度，但我似乎无法使其正常工作。

这是我的HTML：

<header>
    <h1><img src="pictures/accent.gif" alt="accent"  />Tomatoes are Fruit!</h1>

我已经尝试过此CSS：

accent {transform: rotate(180deg);}

我尝试将accent更改为accent.gif并将#accent和h1 accent更改，但是它没有用，所以我不确定这是我弄错的还是样式。再次非常新颖！

编辑：对不起，我刚刚添加了图片。我添加了课程，但仍然无法正常工作。我猜一旦格式正确，橙色的小线看起来就像在旋转。

Answer 1

您应在CSS和HTML中添加 Class 选择器。在您的代码中，您提到的alt属性用于当图片未显示且不打算在CSS中使用时用于替代文本。

.accent {
  transform: rotate(180deg);
}

<header>
  <h1>
    <img class="accent" src="https://placeimg.com/150/150/4" alt="accent" />Tomatoes are Fruit!
  </h1>
</header>