Изображение вращается на 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, но это не работает, поэтому я не уверен, что это неправильно или стиль , Снова очень новое в этом!

edit: Извините, я только что добавил изображение. Я добавил класс, и он все еще не работает. Полагаю, что после правильного форматирования маленькая оранжевая линия выглядит так, как будто она вращается.

Answer 1

Вы должны добавить Class селектор к вашим CSS и HTML. В вашем коде вы упоминаете атрибут 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>