如何将CSS旋转动画反向？

Question

我有一个 CSS 动画，我想根据添加到 DOM 节点的类来反转动画。我尝试过多种方法，但都没有成功。以下是我使用的代码，请参见下文：

示例

    // Closed state
    @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } }
    @-webkit-keyframes spin-close { 100% {  -webkit-transform: rotate(-0deg); } }
    @keyframes spin-close { 100% { transform:rotate(-0deg); } }

    // Open state
    @-moz-keyframes spin-open { 100% { -moz-transform: rotate(-90deg); } }
    @-webkit-keyframes spin-open { 100% { -webkit-transform: rotate(-90deg); } }
    @keyframes spin-open { 100% { transform:rotate(-90deg); } }

我不知道我是不是完全看错了？请给予建议（最好有演示）。

- Nasir

---

好的，演示将很棒。我们能看到一个演示吗？ - SaturnsEye

请发布更多应用此CSS的代码以便我们可以对其进行应用。 - Shoaib Chikate

@ShoaibChikate http://jsfiddle.net/Ugc5g/890/ - Nasir

什么是“reverse”的意思？在您的演示中，当我们悬停在图像元素上后，您将图像向左旋转。那么，在没有悬停时，您是否想要通过动画或其他方式将其旋转回原始位置？我对需求不太清楚。 - Shoaib Chikate

你只为 hover 事件提供了 removeClass。 - Shoaib Chikate

Answer 1

不要费心使用JavaScript或动画。使用CSS过渡实现此功能：

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    transition:all 1s ease-out;
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
}

.image:hover {
    transform:rotate(90deg);
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
}

http://jsfiddle.net/Ugc5g/892/

- Mister Epic

---

如果您在iPhone上使用CSS动画时出现闪烁，请使用：-webkit-backface-visibility: hidden; - Nasir

Answer 2

要将旋转方向反转，您只需将度数值更改为相反的值即可。例如，如果元素当前顺时针旋转了45度，您可以通过将其旋转-45度来反转旋转。

transform: rotate(-45deg);

- Shegerd Shegerdha