我想知道是否有一种简单的方法可以在单击 div 后将其旋转 +90 度,并在下次返回 0 度时单击它(以便 div 旋转 -90 度)。 因为我找不到任何东西,所以我正在寻找你的帮助。谢谢。
最佳答案
您可以使用 toggleClass 并将 css 转换应用于该类:
$('button:first-of-type').on('click', ()=> $('#rotate').toggleClass('rotated'));
const btn = document.querySelector('button:nth-of-type(2)');
const block2 = document.querySelector('#rotate2');
btn.addEventListener('click', ()=>block2.classList.toggle('rotated'));
body {text-align: center;}
#rotate, #rotate2 {
width: 100px;
height: 100px;
background: red;
border-top: 10px solid black;
transition: transform .2s ease;
margin: 20px auto;
color: #fff;
}
.rotated {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>rotate block</button>
<div id="rotate">jQuery</div>
<button>rotate block</button>
<div id="rotate2">Vanilla</div>
关于jQuery 旋转 div onclick +/-90,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30808984/