Javascript，如何旋转我的箭头div？

Question

我还没有创建下拉部分​​，但我希望能够拥有箭头，我点击时创建了这个箭头。这是我的代码。当我选择div时我尝试的所有东西都没有收到任何动作。

＆＃13;

＆＃13;

$(document).ready(function() {
    $('.circle').click(function() {
        $('#rotate').toggleClass('rotated');
    });
});

＆＃13;

.header{
  margin: -8px;
  height:75px;
  background-color: rgba(222,70,82,.7);
}
.circle{
  width:40px;
  height:40px;
  border-radius:60px;
  border: solid 3px white;
  position: absolute;
  left: 200px;
  top:18px; 
}
.circle2{
  width:30px;
  height:30px;
  top: 3px;
  left: 3px;
  border-radius:60px;
  border: solid 2px white;
  position: absolute;
}

.arrow{
 content:'';
  display:block;
  position:relative;
  top:6px;
  left:4px;
  height:15px;
  width:15px;
 -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-top:4px solid white;
  border-right:4px solid white;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.rotated{
     transform:rotate(25deg); 
    -webkit-transform:rotate(25deg); 
    -moz-transform:rotate(25deg); 
    -o-transform:rotate(25deg); 
}

＆＃13;

<header class = "header">

  <div class ="circle" >
    <div class = "circle2"
         </div>    
    
    <div class = "arrow"id="rotate"></div>
  </div></header>

＆＃13;

＆＃13;

＆＃13;

`

Answer 1

将变换更改为135deg后工作。

修改后的CSS

.rotated{
     transform:rotate(135deg); 
    -webkit-transform:rotate(135deg); 
    -moz-transform:rotate(135deg); 
    -o-transform:rotate(135deg); 
    margin-left: 1px;
}

http://jsfiddle.net/d08367ok/