New course! Every coder should learn Generative AI!
Try a free lesson+ 7
I this possible when i touch a image and it rotates for a while . If its possible then how to do it ?
I wanna write a code in which if somebody touches the image then it rotates for a while and again touch the image then it rotates for a while . So how to do this . I wanna do this in this code https://code.sololearn.com/WEK6fG41IdoR/?ref=app
3 Answers
+ 5
And the Javascript to put it together:
window.onload = function () {
metal = document.getElementById('metal');
brass = document.getElementById('brass');
green = document.getElementById('green');
metal.onclick = function () {
if(metal.classList.contains('spin')) {
metal.classList.remove('spin');
} else {
metal.classList.add('spin');
}
};
brass.onclick = function () {
if(brass.classList.contains('spin')) {
brass.classList.remove('spin');
} else {
brass.classList.add('spin');
}
};
green.onclick = function () {
if(green.classList.contains('spin')) {
green.classList.remove('spin');
} else {
green.classList.add('spin');
}
};
};
+ 8
Thanks guys for you help
+ 3
HTML: minor changes. change to id's and removed some unneeded attributes
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="green"><img src="https://lh5.googleusercontent.com/proxy/ucPv634yjs2YSlovJIs2IOFGOknh5L5CC7zrhszOabuaUkn5dVYJS8ya9SM2nEkCVn0kH3A3S-pAQKtHN0zcNZC8OPSQIQ6-nx4RF4VM=w384-h384-nc"/></div>
<div id="metal">
<img src="https://lh3.googleusercontent.com/proxy/9EMPnSgsrVXgqCmja52aPuuTegcdzNVnQsSnuHlM4idZYID8XvOEQpV2aqPauCIhuF0L2odU2-y0nHLX_FySIDY5jXyZb4Vj7JhIRiaCoI2EKTGecrH-fSY=w384-h384-nc">
</div><br><br>
<div id="brass">
<img src="https://images-na.ssl-images-amazon.com/images/I/51XnAavMyuL._SL1001_.jpg">
</div>
</body>
</html>
CSS: Cleaned up removed duplicate code and added spin class code and sized divs etc
#metal img, #brass img, #green img {
width: 250px;
height: 250px;
}
.spin img {
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
}
@-webkit-keyframes spin1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin1 {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spin1 {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Often have questions like this?
Learn more efficiently, for free:
Hot today
USING HTML ONLY!!!
4 Votes
Why is the result always 0?
1 Votes
Game Devolopment with JS
0 Votes
Problem
0 Votes
Dark web access
1 Votes