I need help rotating a PNG file!

HTML-CSS
#1

Hey I’m very new to CSS so speak to me like I’m a 3 year old haha.
I’d like to rotate this text PNG image. I found some code for rotating but how do I target the actual image, what do I need to do? And I mean rotation as in animation. I found this code -

animation: rotation 2s infinite linear;

https://photoform.showitpreview.com/home
The link is attached and it’s this image -
Screen Shot 2021-07-22 at 10.01.50 am
Thank you!

#2

Give it an unique id attribute then you can use the id to target it.

#3

I don’t know how to do that lol.

#4

Show me the html for the image

#5

Is this it? I really have no idea what I’m doing.

#6 
<div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: block; background-image: url(&quot;//static.showit.co/200/mrKDvB1pTPWw4F5mq2ga7Q/135504/topseller.png&quot;);" data-img="headshot-prices_56" class="se-img se-gr slzy"></div>
#7 
<div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: block; background-image: url(&quot;//static.showit.co/200/mrKDvB1pTPWw4F5mq2ga7Q/135504/topseller.png&quot;);" data-img="headshot-prices_56" class="se-img se-gr slzy"></div>
#8

I cant even work out how to post the code omg.

#9

why won’t it let me post the code? ffs.

#10

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

#11

rotation is the name of the animation, if the animation does not exist it will not do anything when you apply it to an element.

Here the image has a class logo you use that for the selector .logo

<img class="logo" src="https://aws1.discourse-cdn.com/freecodecamp/original/3X/4/c/4c06248fcb7353707abcde9f10fc43a5fb6748db.svg">

.logo {
  animation: rotation 2s infinite linear;  
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Example:
https://jsfiddle.net/98k27cwp/

Might be worth taking the fCC curriculum for a spin as well.

#12

Thank you! I hear you re starting with basics but on a pretty tight schedule and this is the only thing I need animated. So what then is my source in the above code I pasted?

#13

Ok I’m almost there. I’ve now got the image rotating at the beginning on my page but not where I want it haha.

#14

I’ve got the item in beginning of page rotating but I don’t know how to target the actual item on the page. :frowning:

#15

It seems to be working. I see it rotating at the top of the page.

BTW, please do not post your link anymore the automatic spam system is going to flag you if you do. We have the link in the first post and that is enough.

#16

Yes but I need the item rotating within the page not at the top. How do I target it within the page?

#17

You just put the element where you want it on the page. I don’t know anything about this showit site you are using so you will just have to refer to the documentation of the site for help.

#18

Hey I’m trying to rotate a PNG file. I’ve managed to get the item to rotate but only at the beginning of the page thanks to help from someone here.
How do I target the actual element within my page?
This is the code I’m using:

<img class="logo" src="	https://static.showit.co/200/mrKDvB1pTPWw4F5mq2ga7Q/135504/topseller.png">

And

.logo {
  animation: rotation 20s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

This is the page:
https://photoform.com.au/home

And this is the item I am trying to target:
Screen Shot 2021-07-22 at 10.01.50 am

Thank you thank you!

#19

I have merged your threads. Please keep it to this one thread.