CODEWITHSUNDEEP
cssimage
Liz
Liz

Reputation: 21

Image to spin 180 deg?

I am just a beginner, so I really don't know how to do much of this CSS styling.

I need to make this (gif) enter image description here to spin in 180 deg, but I can't seem to get it working.

Here is my HTML:

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

I have tried this CSS:

accent {transform: rotate(180deg);}

I tried changing accent to accent.gif and #accent and h1 accent but it's not working, so I am not sure if that's what I am getting wrong or the style. Again very new at this!

edit:Sorry I just added the picture. I added the class and it's still not working. I guess once it's correctly formatted the little orange line looks like it's spinning.

Upvotes: 1

Views: 60

Answers (1)

mhrabiee
mhrabiee

Reputation: 815

You should add Class selector to your CSS and HTML. In your code your are mentioning alt attribute which is used for alternative text when image not showing and not intended to use in CSS.

.accent {
  transform: rotate(180deg);
}
<header>
  <h1>
    <img class="accent" src="https://placeimg.com/150/150/4" alt="accent" />Tomatoes are Fruit!
  </h1>
</header>

Upvotes: 1

Related Questions