What am i doing wrong? CSS rotate arm 30deg

Question

I have tried a few methods but haven't gotten the right one yet I want the arm to rotate on the ↩️↪️ click (multiple times) but from it's bottom where it's connected to the bot. Y'all are amazing I am so blessed to have y'all helping.
https://code.sololearn.com/WQYgzq05X3A0/?ref=app

Answer 1

Change how #unit confines just the area of arm itself and relocate the whole #unit element.

https://code.sololearn.com/WCE3GAr9STsB/?ref=app

Answer 2

Calviղ you amaze me as always thank you so much.

Answer 3

To help you troubleshoot, add this to your CSS:

* {border:1px dotted black;}

Then add a width/height to #unit and [Run]

#unit{
position:relative ;
width:50px;
height:50px;
}

Move your robot to the right (otherwise you can't click the rotate buttons)

Watch the box at the upper left, then try rotating. It rotates 30deg at the right spot.
Your arm, however, is positioned far away from the bounding box (which I think is why it moves so drastically).

Answer 4

Separately on class management, this rolls several concepts into one discussion:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

I'm linking that because you mention clicking multiple times (I think? to rotate an additional 30deg?) but I think they might work better for you another way.

Hopefully someone will cmiiw : I'm thinking you may have to modify the CSS rotation angle dynamically or use toggle /removeClass to have a 60deg rotation as well.

Answer 5

hey friend, if the gear was a wrapper around gear 1 and the arm, wouldent the arm and gear1 rotate around the gear origin? im just thinking if i was to make somthing like this in javascript i would have to translate the origin of the canvas to the centre of the gear and rotate it to move the arm

Answer 6

Thanks everyone I really appreciate the help this is far from finished I need it to pick up and move objects next so don't be surprised if I'm back with additional questions.

Answer 7

Y'all are so amazing I can't thank y'all enough Burey the Genius figured out the claw click so just a few more design additions and we have a pretty cool Sololearn Community created game for the kids to show off.

https://code.sololearn.com/W1usyPERaCwd/?ref=app

Answer 8

Use -
transform-origin : x% y %;
to shift the origin form top-left to x% and y% away
The rotation will then occur according to the shifted origin
Default value is 50% 50%

Answer 9

I decided to attempt to fit it in this game somehow but I am struggling I know I will need to change the click function to occur when the claw is over the objects unsure how.

https://code.sololearn.com/W7NTGTmKz0zX/?ref=app

Answer 10

Ok y'all are amazing we have the bot fully functioning now (thanks ODLNT ) . Kirk Schafer D_Stark I'm going to attempt to gamify this without breaking it I may be back for more help soon.

Answer 11

Hi Bobbie.

As I figure out
```
#unit {
...
transform-origin: 31px 26px;
}
```

works as a charm to set pivot point of this arm.