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的{{1}}和to值添加什么。我的元素开始旋转90度的事实让我失望。我是在正确的轨道上还是离开了？

谢谢！

Answer 1

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

我稍微修改了你的例子，使它更具惯用性。

＆＃13;

var button = document.querySelector('button')
var el = document.querySelector('#myElement')

function toggle(event) {
  el.classList.toggle('rotate-clockwise')
}

button.addEventListener('click', toggle, false)

＆＃13;

.my-element {
  display: inline-block;
  transition: transform 0.1s linear;
}

.rotate-clockwise {
  transform: rotate(90deg);
}

＆＃13;

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

＆＃13;

在javascript中我们首先得到我们的按钮和元素，以便我们以后可以对它进行操作（我们使用querySelector这是更现代的，让你使用CSS选择器）。然后我们定义你的事件处理程序，它只是打开和关闭rotate-clockwise CSS类。最后，我们将toggle函数作为单击事件处理程序附加到按钮。

在CSS中，我们告诉my-element为inline-block，不要延伸窗口的整个宽度。此外，transform的每次更改都应使用0.1秒的线性转换。每次添加或删除.rotate-clockwise时，元素都会旋转。

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

CSS3 - 顺时针旋转比逆时针旋转

1 个答案: