Question

单击图像时我很难旋转图像。

我已经附加了一个链接来修饰我的HTML，CSS和JS

这是我的HTML

<html>
  <header>
    <h1 id='heading'>SELF</h1>
  </header>
  <hr>
  <body>
    <div class='introCard'>
      <img id='self' src="https://image.ibb.co/djffuz/self_eye_centered.jpg"/>
    </div>
  </body>
</html>

这是我的CSS

header {
  width: 100%;
  height: 75px;
  display: flex;
  flex-direction:column;
  align-items: center;
}

.introCard {
  width: 100%;
  margin-top: 35px;
  margin-bottom: 25px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center
}

div img {
  width: 35%;
}

hr {
  width: 50%
}

这是我的JS

let imageToSpin = document.getElementById('self');

function spinImage() {
    imageToSpin.rotate(20 * Math.PI/180);
}

imageToSpin.onclick = spinImage;

Answer 1

rotate不是Element对象的方法。

旋转图像的正确方法是添加（或切换）CSS类，然后使用rotate()旋转它。

使用您的示例：

JS文件

let imageToSpin = document.getElementById('self');
imageToSpin.onclick = function () {
  imageToSpin.classList.toggle('rotated')
};

CSS文件

.rotated {
  transform: rotate(90deg)
}

当然还有HTML中ID为self的图像。

Here is your JSFiddle updated.

如果需要在JS中计算deg，则可以直接在onclick函数中手动设置CSS属性。

Answer 2

围绕要使用的内容创建一个闭包，然后像这样使用style.transform：

let imageToSpin = document.getElementById('self');

function spinImage(imageToSpin) {
  var count = 0
  return function() {
    count += 10;
    imageToSpin.style.transform = `rotate(${count}deg)`;
  }
}

imageToSpin.onclick = spinImage(imageToSpin);

Answer 3

以下是您快速完成设置的方法：

  var rotate_angle = 0;

  <img src='blue_down_arrow.png' onclick='rotate_angle = (rotate_angle + 180) % 360; $(this).rotate(rotate_angle);' /></a>

Answer 4

尝试以下方法：
css：

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
 -o-transform: rotate(90deg);
}
#self{transition: all 0.5s ease;}

在js中：

$(document).ready(function() {
var degrees = 0;
$('#self').click(function rotateMe(e) {
 degrees += 90;
//$('#self').addClass('rotated'); // for one time rotation
$('#self').css({
  'transform': 'rotate(' + degrees + 'deg)',
  '-ms-transform': 'rotate(' + degrees + 'deg)',
  '-moz-transform': 'rotate(' + degrees + 'deg)',
  '-webkit-transform': 'rotate(' + degrees + 'deg)',
  '-o-transform': 'rotate(' + degrees + 'deg)'
});
})});

如何旋转图像.onclick

4 个答案: