Html & JS rotate image 90 degrees on click

Question

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" />

First, it's `$('#theImage')`, and `onclick="rotate90()"`. – DjaouadNM Aug 17 '19 at 22:43 — DjaouadNM, Aug 17 '19 at 22:43

score 3 · Answer 1 · answered Aug 17 '19 at 22:47

Firstly, you will have to use $('#theImage') since you are referencing by id. Try the below code.

let angle = [0, 90, 180, 270];
let current = 0;

function rotate90() {
  current++;
  if (current == 4)
    current = 0;
  $('#theImage').css('transform', 'rotate(' + angle[current] + 'deg)');
}

.btn-floating-container {
  top: 50px;
  left: 50px;
  position: fixed;
  z-index: 1;
}

.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" />

score 2 · Answer 2 · answered Aug 17 '19 at 22:44

2

You are selecting by class (.theImage), but that element is assigned an id, so you should select like this $('#theImage').

answered Aug 17 '19 at 22:44

simon

1,095
6
11

Mister Jojo · Accepted Answer · 2019-08-17T23:28:51.053

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- 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- repeating the addition of a single class is useless: the rotation values will not add up.

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" />

Exactly what i was looking for!!! #theImage class with --turn thank you! i didnt know how to get webkit-transform:rotate to be dynamic, thank you — JavaSheriff, Aug 17 '19 at 23:37

Html & JS rotate image 90 degrees on click

3 Answers3

Linked