HTML&JS单击将图像旋转90度 [英] Html & JS rotate image 90 degrees on click

问题描述

我正尝试在单击时向右旋转此图像
每次单击，图像将向右旋转90度，因此，单击4次将其恢复到原始位置.
由于某些原因，无法为图像分配类(rotateimg90).

I am trying to rotate right this image on click
Every click, the image will rotate 90 degrees right, so 4 clicks will get it to the original position.
For some reason assigning the class (rotateimg90) to the image doesn't work.

function rotate90(){
    alert('rotate!')
	$('.theImage').addClass('rotateimg90');
}

.btn-floating-container {
        top:50px;
        left:50px;
        position: fixed;
    }
    
  .btn-floating {
        width: 150px;
        height: 50px;
        border-radius: 50%;
        text-align: center;
        padding: 0px;
        font-size: 24px;
    }

.rotateimg90 {
  -webkit-transform:rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn-floating-container">
<button class="btn-floating btn btn-primary btn-medium"  onclick="rotate90()">ROTATE</button>
</div>

<img id="theImage" src="https://images.unsplash.com/photo-1533467915241-eac02e856653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />

推荐答案

当您明确要求使用javascript回答时，我不明白为什么您的答案在jQuery中.

I do not understand why your answers are in jQuery while you have clearly asked for an answer in javascript.

您的论文中有几个错误:

There are several errors in your essay :

1-，您已经混淆了使用类(用表示.)和使用ID(用表示)#)，但无论如何您都不需要使用它.

1- as indicated by others you have confused the use of a class (represented by a .) With the use of an ID (represented by a #), but anyway you do not need to use it.

2-重复添加单个类是没有用的:旋转值不会累加.

2- repeating the addition of a single class is useless: the rotation values will not add up.

3-，您已将"ROTATE"按钮置于图片的背景中=>我在100上添加了z-index，以便它返回到前景.

3- you have placed the button "ROTATE" is in the background of the image => I added a z-index to 100 so that it returns to the foreground.

const Root     = document.documentElement
    , gRoot    = getComputedStyle(Root)

var RotateDeg = parseInt(gRoot.getPropertyValue('--turn'))

function rotate90()
  {
  RotateDeg = (RotateDeg+90) % 360
  Root.style.setProperty('--turn', RotateDeg + "deg")
  }

:root {
  --turn : 0deg;
}
.btn-floating-container {
  top:50px;
  left:50px;
  position: fixed;
  z-index: 100;
}
  
.btn-floating {
  width: 150px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  padding: 0px;
  font-size: 24px;
  }

#theImage {
  -webkit-transform:rotate( var(--turn) );
  -moz-transform: rotate( var(--turn) );
  -ms-transform: rotate( var(--turn) );
  -o-transform: rotate( var(--turn) );
  transform: rotate( var(--turn) );
}

<div class="btn-floating-container">
  <button class="btn-floating btn btn-primary btn-medium"  onclick="rotate90()">ROTATE</button>
</div>
  
<img id="theImage" src="https://images.unsplash.com/photo-1533467915241-eac02e856653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />

这篇关于HTML&JS单击将图像旋转90度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！