![](/img/trans.png)
[英]How can I rotate a given matrix by one element clockwise in javascript?
[英]How can I rotate an element?
这是我的代码:
$('.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
旁边)是固定的..当用户点击div.test
时,如何将其旋转45°?
另一种选择:你可以使用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>
您可以简单地使用transform
CSS属性。 在MDN文档中阅读有关它的更多信息。
$('.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.