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

Question

我还没有创建下拉部分​​，但我希望能够有箭头，我在单击时创建了指向下方的箭头。这已经是我的代码了。当我选择 div 时，我尝试的所有操作都没有收到任何操作。

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

.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); 
}

<header class = "header">

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

`

Answer 1

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

修改后的 CSS

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

http://jsfiddle.net/d08367ok/