每次点击旋转图像180度（CSS动画）

Question

每次点击旋转图像180度（CSS动画）

3

我已经编写了一些代码，可以在第一次单击时将图像旋转180度。以下是代码：

<HTML>
<head>
<style>
#loading:hover {
        -webkit-animation: rotation 0.5s  linear;
}

@-webkit-keyframes rotation {
        from {
                -webkit-transform: rotate(0deg);
        }
        to {
                -webkit-transform: rotate(180deg);
        }
}
</style>
</head>
<body>
<img id="loading" src="https://dl.dropboxusercontent.com/1/view/ytbvxuhzbxjqldt/Apps/Pancake.io/help/img.png">
</body>
</HTML>

我想在第一次点击时将图像向左旋转180度，然后在下一个（第二个）点击中，将其反向旋转（向右旋转180度），在第3次点击中向左旋转，在第4次点击中向右旋转。前进和反转模式下无限旋转。我能通过CSS做到这一点吗？请帮我解决这个问题。

- user8312352

我有一个项目需要在2017年7月15日之前完成，所以请有人快速帮助我。 - user8312352

1

仅使用CSS，我认为你做不到。你需要一些JavaScript逻辑，而且你的代码是当鼠标悬停在图像上时触发，而不是点击时触发。 - Pablo Cesar Cordova Morales

@PabloCesarCordovaMorales 这个评论不能作为答案。无论是使用CSS还是JavaScript制作动画，请在您的评论中提供一个解决我的问题的代码。 - user8312352

@PabloCesarCordovaMorales 如果您知道如何使用JavaScript实现，请给我提供一段代码。 - user8312352

@user8312352 这不可能使用 CSS。如果需要帮助，您可以使用 jQuery，在这里评论。 - Robert Williams

显示剩余2条评论

2个回答

0

希望这能帮到你，你只需要将“hover”改为“active”即可。

<HTML>
<head>
<style>
#loading:active {
        -webkit-animation: rotation 0.5s  linear;
}

@-webkit-keyframes rotation {
        from {
                -webkit-transform: rotate(0deg);
        }
        to {
                -webkit-transform: rotate(180deg);
        }
}
</style>
</head>
<body>
<img id="loading" src="https://dl.dropboxusercontent.com/1/view/ytbvxuhzbxjqldt/Apps/Pancake.io/help/img.png">
</body>
</HTML>

- Yusif

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zer00ne · Accepted Answer

目标

"我想在第一次点击时将图像向左旋转180度，然后在下一次（第二次）点击中反向旋转（向右旋转180度），第三次向左旋转，第四次向右旋转。无限制地在正反两个模式之间旋转。"

OP（原始帖子）

<img> 是403（可能需要登录），因此我不知道该 <img> 的形状和大小。旋转回去（向左旋转（rotate(-180deg)）和向前（向右旋转（rotate(180deg)））的行为让我想起了模拟表计（参见图I）。此外，提到了点击，但不明显用户单击哪里...是 <img> 还是页面上的任何位置？最后，在应用它的上下文中，厂商前缀如 --webkit- 仅适用于 Chrome 和 Safari 的 CSS 动画，使 Firefox 和 Edge 完全没有动画。而且，在其应用的上下文中，甚至不需要供应商前缀。

图I（向右旋转）

模拟表计指针	CSS^*️⃣
	/* ^{️⃣左侧图像的 CSS 是如果它是 HTML 的估计值} / `transform-origin: left center;` `transform: rotate(150deg);`

纯 CSS 解决方案

HTML：<label> 和表单控件关联

HTML：通过 name="rad" 和 type="radio" 实现互斥

CSS：相邻的 + 兄弟组合器和 :checked 伪类选择器

Place two <input type="radio"> at the top of page and hide them with display: none. Add two <label>s and assign the [for] attribute to each one -- the value being the #id of one of the radio buttons (see Figure II).

Note each <input> has [name="rad"] which makes a group of <input>s "mutually exclusive". In short, only a single member of a group can be selected at a time.

Figure II

<input id='left' name='switch' class='chx' type='radio'>
<input id='right' name='switch' class='chx' type='radio'>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    <legend>|]===============|>>>></legend>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

  <label for='left' class='btn'>⏪</label>
  <label for='right' class='btn'>⏩</label>

CSS sibling combinators allow us to strategically arrange HTML layout and control the "state" of <input type="checkbox"> and/or <input type="radio"> by the adding and removal of the :checked pseudo-class by user interaction. In this case the user clicks the <label>s in order to check the hidden radio buttons.

Figure III

/*
If #left radio button is checked, then find the checkbox after the #left 
checkbox and next to the checkbox is a <section> and within is the <legend>
that will rotate left -180deg.
*/
#left:checked+#right+section legend {
  transform: rotate(-180deg) translateX(0.25em);
  transition: 0.6s ease;
}
/* As previous comment but the opposite in direction */
#right:checked+section legend {
  transform: rotate(0deg) translateY(-0.15em);
  transition: 0.6s ease;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font: 300 5vmin/1 Consolas;
}

section {
  position: relative;
  min-width: 500px;
  min-height: 60vh;
  margin: 25px auto 10px;
  border: 5px inset navy;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

fieldset {
  position: absolute;
  bottom: -0.25em;
  left: 50%;
  width: max-content;
  max-height: 0;
  padding: 0;
  line-height: 0;
}

legend {
  transform-origin: center left;
  color: magenta;
}

.chx {
  display: none;
}

#left:checked+#right+section legend {
  transform: rotate(-180deg) translateX(0.25em);
  transition: 0.6s ease;
}

#right:checked+section legend {
  transform: rotate(0deg) translateY(-0.15em);
  transition: 0.6s ease;
}

menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  cursor: pointer;
}

<main>
  <input id='left' name='switch' class='chx' type='radio'>
  <input id='right' name='switch' class='chx' type='radio'>
  <section>
    <fieldset>
      <legend>|]===============|>>>></legend>
    </fieldset>
  </section>
  <menu>
    <label for='left' class='btn'>⏪</label>
    <label for='right' class='btn'>⏩</label>
  </menu>
</main>