Help needed on project 3

Hi there.
I am stuck on an issue on project 3.
I have created a slider which i want to use to rotate an image.
My difficulty is joining the 2 items together.

here is my code:

would appreciate it if somebody could explain how its done.

ok so found some additional code and example which I am adapting to make it work with my code.
update to follow.

here is the updated code link:

I notice some html5 that appears at the bottom of the screen :confused:

transform:rotate(<span id="span1">7deg</span>);

here the issue
transform: rotate(7deg); is not html (it’s css)

it should be like this:
in html <span id="span1">Put what do you want to put </span>
in css

#span1 {
transform: rotate(7deg);

thanks :+1:

here is where i have copied it from:

All i have done is copy the above link

I see, the text transform: rotate(<span id="span1">7deg</span>); in html file is just for indication.

The rotate is in the css file

#div1 {
  border:1px solid black;

and ofcourse some javascript to control the rotation using the mouse click

So the #div1 in my case will be

not quite, still havent mastered this yet.

The slider doesnt seem to be doing anything yet.
am I missing something?

No, tried changing the element to (.container) to see if that would work but no. :confused:

is it not possible to rotate an element with a class tag?

Im looking at W3scools and seeing that to flip image you use scale attribute no transform/ rotate

I am trying to get the slider to flip the image 180 degrees.