javascript - 使用 css/javascript 旋转图像

<分区>

今天我想创建一个不同的按钮......所以我想:如果我得到一个旋转 180 度的图像，当我点击它并一次又一次地旋转 180 度......(每次我点击)。经过多次尝试，我不知道我该怎么做。这是我的想法和做法:

HTML:

<img id="rotater" onclick="rotate()" src="anyImage.png"/>

CSS:

img{border: 0.0625em solid black;border-radius: 3.75em;}
#rotate{ animation: rotation 3s 0.5 forwards;}
@keyframes rotation{50% {transform: rotate(180deg);}}

JavaScript:

function rotate(){x=document.getElementById('rotater');x.id = 'rotate';}

不重要，只是一个想法...

最佳答案

试试这个

使用此代码，每次您单击图片时，您的图片都会旋转 180 度

let rotateAngle = 180;
function rotate() {
  $("#rotater").css({'transform': 'rotate('+rotateAngle+'deg)'});
  rotateAngle = rotateAngle + 180;
}

#rotater {
  transition: all 0.3s ease;
  border: 0.0625em solid black;
  border-radius: 3.75em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="rotater" onclick="rotate()" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>

关于javascript - 使用 css/javascript 旋转图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51816979/

上一篇：ios - iPhone webview 上的引导网格系统对齐问题

下一篇：html - 申请第 n 个 child 不起作用

相关文章：

CSS3动画停留在结束状态3秒

css - IE7 在将 CSS 应用于动态创建的 DOM 元素时是否存在问题？

jquery - 在 facebook iframe 中添加自定义样式表

javascript - 更改 JavaScript 数组给定维度的函数

javascript - 如何在 Electron.js 中保存在 Canvas 上绘制的图像

javascript - 如何在javascript中定义动态变量

javascript - 获取嵌入对象标签的 HTML 页面的参数

javascript - JavaScript 中两个相似代码块的不同行为

javascript - Rx Observable 创建/结构

html表格使列宽适合内容