Rotating specified part of an element using 1 div tag or by using only 1 element! | SoloLearn: Learn to code for FREE!

+11

Rotating specified part of an element using 1 div tag or by using only 1 element!

I have a cylindrical element which rotates about 90degree,can I rotate only specified part of the element to get transformed? I'm the beginer to web languages and I just know basics of Javascript though, I would like to know the way to achieve it in CSS if not javascript. Example: Like tail of this dog gif https://photos.app.goo.gl/E5Kc78FXEhW8uwLy9 Preferably I need with CSS, if possible! Thanks. https://code.sololearn.com/WFT2eQ6I45TY/?ref=app

9/26/2020 2:08:21 AM

Chaithra Gowda👑

12 Answers

New Answer

+6

Chaithra Gowda👑 , not sure if you check the source code of that Husky dog and tail 🤔 https://codepen.io/jfksdca/pen/rzNRBw Learn from here, the css code & specifically "Husky tail" part. You need to work on a lot of elements in particular to achieve that shape like real looking tail.. with CSS shapes. Hope this helps you!

+7

Yes AZHAGESAN (Call Me Alex) but not by splitting line I need entire specified elements part and another part should not get splitted it shoud be the part of that element only but, just it should be unchanged with its position.

+7

Yeah! But it's by 6 div tags though this is what I needed exactly in output thanks a lot DAC 🎯 !!

+7

Mirielle[ InAcTiVe ] okay ! Thanks for your answer:)

+6

No, Aakaanksha 💕 I have 1 element which rotates 90degree from left ,but I want the right half part of the element to be unchanged ! Like in L shape I need.... I don't know it can be whether achieved or not :)

+6

That's okay Aakaanksha 💕 ! But thanks a lot for your efforts to help me;)

+5

Aakaanksha 💕 What you did is right but the transformed part wont be curve right! https://photos.app.goo.gl/E5Kc78FXEhW8uwLy9 Actually my doubt raised from here its a gif made with pure CSS

+5

Chaithra Gowda👑 Hmm as far as i know transform part won't be curve 😅 But still I'm not too good in CSS! Maybe there should be a way! Others might help you.

+3

I'm sorry but I don't understand what you trying to say by this: "can I rotate only specified width of the element to get transformed?" The width of the element is 190deg. did u mean you wanna to rotate it to the degree which is same as it's width. In this case 190?

+3

Did you mean rotate specific part of the line. Like split the line?

+3

Chaithra Gowda👑 I don't think you can split that single div. What we can do is keep two separate parts and then animate only the left part. Here have a look: https://code.sololearn.com/W1v84lCYIXzn/?ref=app

+3

Short answer: you cannot rotate part of the div except you create a new div for rotation