Question

有人可以帮我一个问题吗？

我有2格。

第一个用于旋转第二个格。

第二个将自身旋转到常规旋转的位置。

我点击第一格->旋转第二格。

我点击第二个div，它会将其自身旋转到上一个/常规位置。

#_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>

Answer 1

尝试使用此代码 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');
  }
});

灵感来自jQuery rotate div onclick +/-90

通过单击另一个Div来旋转Div

1 个答案: