jQuery 旋转 div onclick +/-90答案

【问题标题】：jQuery rotate div onclick +/-90jQuery 旋转 div onclick +/-90
【发布时间】：2015-08-28 19:30:26
【问题描述】：

我想知道是否有一种简单的方法可以在单击 div 后将其旋转 +90 度，并在下次单击它时返回 0 度（以便 div 旋转 -90 度）。由于我找不到任何东西，所以我正在寻求您的帮助。谢谢。

【问题讨论】：

你能告诉我们你的尝试吗？
可能与stackoverflow.com/questions/3020904/…重复
如果支持 IE it could be achieved with pure CSS。这是demo
你也可以使用：stackoverflow.com/questions/37452477/…

【解决方案1】：

您可以使用 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>

【讨论】：

谢谢，这正是我想要的！我用 CSS3 transition 使它更平滑了一些例如：-webkit-transition: all 1s ease; Fiddle
很好，很乐意提供帮助。除了添加“全部”之外，您还可以仅将转换添加到转换：#rotate{ width: 100px; height: 100px; background: red; margin: 50px; text-align: center; -webkit-transition: transform 1s ease; -moz-transition: transform 1s ease; -ms-transition: transform 1s ease; -o-transition: transform 1s ease; transition: transform 1s ease; }
不使用任何插件或功能可能是最好的解决方案。

【解决方案2】：

您需要使用 CSS 来旋转 div。对于+-90，您必须添加/删除div，这可以通过toggleClass 轻松实现。在 click 事件中添加此行为将导致如下所示。

$('.square').click(function() {
    $(this).toggleClass('rotate-90');
});

.square {
  width: 150px;
  height: 100px;
  background-color: red;
}

.rotate-90 { 
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square">
  
</div>

【讨论】：