요소를 어떻게 회전시킬 수 있습니까?

Question

여기

내 코드입니다 :

$('.click').on('click', function(){ 
 
    $(this).next('div').toggle(100); 
 
});

.click{ 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="click">click <i class="fa fa-caret-down" aria-hidden="true"></i></div> 
 
<div>something</div>

당신이 ...이 고정 ( click 옆) 화살표가 어떻게 45 ° 때 사용자를 클릭에 회전 수시피

div.test?

Answer 1

또 다른 옵션 : 당신이 사용할 수있는 fontawesome의 fa-caret-right과 전환!

귀하의 의견을 알려주십시오. 감사!

$('.click').on('click', function(){ 
 
    $(this).next('div').toggle(100, 'linear', function(){ 
 
     $(this).prev('div').find('i').toggleClass('fa-caret-down'); 
 
     $(this).prev('div').find('i').toggleClass('fa-caret-right'); 
 
    }); 
 
});

.click{ 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="click">click <i class="fa fa-caret-down" aria-hidden="true"></i></div> 
 
<div>something</div>

[JQuery와의 요소를 회전 할]의

Answer 2

CSS 속성을 transform으로 간단하게 사용할 수 있습니다. MDN docs에서 자세한 내용을 읽어보십시오.

$('.click').on('click', function(){ 
 
    $(this).next('div').toggle(100) 
 
    $(this).children('i').toggleClass('rotate'); 
 
});

.click{ 
 
    cursor: pointer; 
 
} 
 

 
.rotate { 
 
    transform: rotate(270deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="click">click <i class="fa fa-caret-down" aria-hidden="true"></i></div> 
 
<div>something</div>