Random in CSS or JS

Question

need help, want to spin the image and after 3 sec it must stop with random dergree (from 360 to 10800). it starts spin when I click it from the last position.

when the image stops, it appears an area with RANDOM citation from my massive. it must be something like "spin the bottle"

please help, I've got some code, but don't know how to finish it.

.wheel {
  animation: wheel 3s .5s;
  animation-fill-mode: both;
}

@keyframes wheel {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(10800deg);
  }
}

user_219661 · Answer

You can do this with css custom properties. The first thing to do is create a property for your transform:

:root{
  --rot: rotate(108000deg);
}

And then use that in place of your hard-coded value

@keyframes wheel {
  from { transform: rotate(0);}             
  to { transform: var(--rot); }
}

At this stage everything should carry on working as before.

Now you can manipulate that property with javascipt:

var min = 360;
var max = 108000;
var rnd = Math.random()* (max - min) + min;
console.log(rnd);

var wheel = document.querySelector(".wheel");
wheel.style.setProperty("--rot","rotate(" + rnd + "deg)");

:root{
  --rot: rotate(108000deg);
}

.wheel {    
  animation: wheel 3s .5s; 
  animation-fill-mode: both; 
}

@keyframes wheel {
  from { transform: rotate(0);}    
  to { transform: var(--rot); }
}

If you want to repeat the animation on something like a click you need to doa bit of a workaround

var min = 360;
var max = 108000;

var wheel = document.querySelector("#wheel");
wheel.addEventListener("click", function(e) {
  e.preventDefault;
  
  // -> removing the class
  wheel.classList.remove("wheel");
  
  // -> triggering reflow /* The actual magic */
  // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
  // Oops! This won't work in strict mode. Thanks Felis Phasma!
  // element.offsetWidth = element.offsetWidth;
  // Do this instead:
  void wheel.offsetWidth;
  
  var rnd = Math.random()* (max - min) + min;
  console.log(rnd);
  wheel.style.setProperty("--rot","rotate(" + rnd + "deg)");
  // -> and re-adding the class
  wheel.classList.add("wheel");
}, false);

:root{
  --rot: rotate(108000deg);
}

.wheel {    
  animation: wheel 3s .5s; 
  animation-fill-mode: both; 
}

@keyframes wheel {   
  to { transform: var(--rot); }
}

user_5953610 · Answer

Here is a one liner approach to spin the element with random degree;

let rnd = Math.floor(Math.random() * (10800 - 360 + 1)) + 360;
document.querySelector(".wheel").style = `transform:rotate(${rnd}deg)`;

.wheel {    
  animation: wheel 3s .5s; 
  animation-fill-mode: both;
}

@keyframes wheel {
  to { transform: rotate(0deg);}    
}

Random in CSS or JS

2 Answers