Rotate Div by clicking on another Div

Question

Could some one help me with one question:

I have 2 divs.

The first one is being used to rotate the second div.

the second one to rotate it self to the regular rotation.

I click on first div --> it rotates the second DIV.

I click on the second div, it's rotating it self to the previous/regular position.

#_4220w_86 {
    height: 20px;
    width: 20px;
    background-color: #171717;
    border-radius: 50%;
    margin-top: -43px;
    margin-left: 124px;
    cursor: pointer;
}

#_4220w {
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-left: 6px solid #ec820f;
    border-bottom: 3px solid transparent;
    margin-left: 132px;
    margin-top: -13px;
    cursor: pointer;
}

#_4220w_2 {
    position: absolute;
    right: 20px;
    height: 28px;
    width: 28px;
    background-color: #0f0f0f;
    border-radius: 100%;
    cursor: pointer;
    top: 45px;
}

._4220w_2 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5.5px 0 5.5px 10px;
    border-color: transparent transparent transparent #ec820f;
    margin-left: 10px;
    margin-top: 8px;
}

<!--Here is the first DIV:-->

<div id="_4220w_86">
</div>

<div id="_4220w">
</div>

<!--Here is the second DIV:-->

<a href="#" id="_4220w_2">
<div class="_4220w_2"></div>
</a>

Please post the javascript that is triggering your rotating divs. — imvain2, Mar 18 '19 at 16:43

score 0 · Accepted Answer · answered Mar 18 '19 at 16:51

try to use this code http://jsfiddle.net/24yboknc/1/

html

<div id="rotate">rotate the other</div>
<div id="rotate2"> back to normal</div>

css

#rotate,#rotate2{
    width: 100px;
    height: 100px;
    background: red;
    margin: 50px;
    text-align: center
}

#rotate2.rotated{
    transform: rotate(90deg);
}

js

$('#rotate').click(function(){
    if(!$('#rotate2').hasClass('rotated')){
    $('#rotate2').toggleClass('rotated');
   }
});
$('#rotate2').click(function(){
    if($('#rotate2').hasClass('rotated')){
        $('#rotate2').removeClass('rotated');
  }
});

inspired to jQuery rotate div onclick +/-90

Rotate Div by clicking on another Div

1 Answers1