Help needed on project 3

Code Feedback
1

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:

https://codepen.io/lukemersh/pen/EJREaJ

would appreciate it if somebody could explain how its done.

2

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

3

here is the updated code link:

https://codepen.io/lukemersh/pen/EJREaJ

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

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

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

5

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

#span1 {
transform: rotate(7deg);
}
6

thanks :+1:

here is where i have copied it from:

https://codepen.io/adrianparr/pen/DBFbf

All i have done is copy the above link

7

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 {
  width:120px;
  height:100px;
  background-color:yellow;
  border:1px solid black;
  transform:rotate(7deg);
  -ms-transform:rotate(7deg);
  -webkit-transform:rotate(7deg);
}

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

So the #div1 in my case will be img.show.

9

not quite, still havent mastered this yet.

10

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

11

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

12

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

13

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

14

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