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 as
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" />
You are selecting by class (.theImage
), but that element is assigned an id, so you should select like this $('#theImage')
.
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" />