CSS3 - 顺时针旋转而不是逆时针旋转

Question

我有一个这样定义的 HTML 元素:

<div id="myElement" class="rotated">&gt;</div>
<button onClick="toggle('myElement');">Toggle</button>

function toggle(eid) {
  var el = document.getElementById(eid);
  if (el) {
    el.className += el.className ? 'rotate-clockwise' : 'rotate-counter-clockwise';
  }
}

然后我的 CSS 定义如下:

.rotated {
  transform: rotate(90deg);
}

@keyframes rotateClockwise { from { ? } to { ? } }
.rotate-clockwise {
  animation rotateClockwise 0.1s linear;
}

@keyframes rotateCounterClockwise { from { ? } to { ? } }
.rotate-counter-clockwise {
  animation rotateCounterClockwise 0.1s linear;
}

我不确定要为我的关键帧 的from 和to 值添加什么。我的元素开始旋转 90 度的事实有点让我失望。我走在正确的轨道上还是偏离了轨道？

谢谢!

Answer 1

你的元素开始旋转是因为它有 .rotated 类，它告诉它要旋转 90deg。

我稍微修改了您的示例，使其更加地道。

var button = document.querySelector('button')
var el = document.querySelector('#myElement')

function toggle(event) {
  el.classList.toggle('rotate-clockwise')
}

button.addEventListener('click', toggle, false)

.my-element {
  display: inline-block;
  transition: transform 0.1s linear;
}

.rotate-clockwise {
  transform: rotate(90deg);
}

<div id="myElement" class="my-element">&gt;</div>
<button>Toggle</button>

在 javascript 中，我们首先获取按钮和元素，以便稍后对其进行操作(我们使用更现代的 querySelector 并允许您使用 CSS 选择器)。然后我们定义您的事件处理程序，它简单地切换 rotate-clockwise CSS 类的打开和关闭。最后，我们将 toggle 函数作为点击事件处理程序附加到按钮。

在 CSS 中，我们将 my-element 设置为 inline-block，以便不会覆盖整个窗口的宽度。此外，对 transform 的每次更改都应使用 0.1s 的线性过渡。每次添加或删除 .rotate-clockwise 时，元素都会旋转。

希望这能满足您的需求，并帮助您更好地理解问题。