时间戳

首页 > 解决方案 > 使用 css/javascript 旋转图像

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';}

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

标签： javascripthtmlcss

解决方案

尝试这个

使用此代码，每次单击图像时，您的图像都会旋转 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"/>

推荐阅读