What am i doing wrong? CSS rotate arm 30deg | Sololearn: Learn to code for FREE!
Neuer Kurs! Jeder Programmierer sollte generative KI lernen!
Kostenlose Lektion ausprobieren
+ 13

What am i doing wrong? CSS rotate arm 30deg

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

19th Oct 2018, 3:41 AM
bobbie
bobbie - avatar
11 Antworten
+ 10
Change how #unit confines just the area of arm itself and relocate the whole #unit element. https://code.sololearn.com/WCE3GAr9STsB/?ref=app
19th Oct 2018, 8:29 AM
CalviŇ▓
CalviŇ▓ - avatar
+ 7
CalviŇ▓ you amaze me as always thank you so much.
19th Oct 2018, 11:20 AM
bobbie
bobbie - avatar
+ 6
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).
19th Oct 2018, 4:37 AM
Kirk Schafer
Kirk Schafer - avatar
+ 6
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.
19th Oct 2018, 4:52 AM
Kirk Schafer
Kirk Schafer - avatar
+ 6
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
19th Oct 2018, 8:37 AM
D_Stark
D_Stark - avatar
+ 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.
19th Oct 2018, 11:19 AM
bobbie
bobbie - avatar
+ 6
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
20th Oct 2018, 3:01 AM
bobbie
bobbie - avatar
+ 4
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%
19th Oct 2018, 5:26 AM
Utk╬▒rsh
Utk╬▒rsh - avatar
+ 4
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
19th Oct 2018, 2:28 PM
bobbie
bobbie - avatar
+ 3
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.
19th Oct 2018, 12:52 PM
bobbie
bobbie - avatar
+ 3
Hi Bobbie. As I figure out ``` #unit { ... transform-origin: 31px 26px; } ``` works as a charm to set pivot point of this arm.
19th Oct 2018, 9:45 PM
Sergei No
Sergei No - avatar