How to Rotate an Image by a Random Amount Using CSS

How to rotate an image by a random amount using CSS?

You won't need separate CSS IDs, but you could use some jQuery on the class. .each() is used instead of .css() directly here because otherwise the random angle would be generated once and used for all of the images. To rotate individally on hover:

$('.photo').hover(function() {
    var a = Math.random() * 10 - 5;
    $(this).css('transform', 'rotate(' + a + 'deg) scale(1.25)');
}, function() {
    $(this).css('transform', 'none');
});

If you want to smoothly animate these transformations, you can simply add a transform CSS property to the class:

.photo {
    transition: transform 0.25s linear;
}

Demonstration: http://jsbin.com/iqoreg/1/edit

How to have an image rotated to a random degree when webpage is loaded? (JavaScript)

Your problem is here:

image.style.transform = `rotate(${rotation.value}deg)`

perhaps .value was a typo, but it needs to be deleted:

image.style.transform = `rotate(${rotation}deg)`;

I've made a working snippet, with some extra styling to make the image container elongated and coloured so you can see the rotation. The angle is different for each reload, as you intended.

let image = document.getElementById(`image`)
//let rotation = 90;
let rotation = Math.floor(Math.random() * 359)
let degrees = document.getElementById(`degrees`)
let submitButton = document.getElementById(`submitButton`)
let difference
let rotationParagraph = document.getElementById(`rotationParagraph`)

image.style.transform = `rotate(${rotation}deg)`;

submitButton.addEventListener(`click`, guessRotation)

function guessRotation() {
  difference = `Math.abs(${rotation.value} - ${degrees.value})`
  rotationParagraph.innerHTML = `Rotation is ${rotation.value}. You were off by ${difference.value}.`
}

#object, 
#sidePanel {
  /* puts the image and side panel side by side */
  display: inline-block;

  /* makes the image and side panel aligned at the top */
  vertical-align: top;
}

#image {
  /* gives dimensions and a border to the image */
  border: 1px solid black;
  aspect-ratio: 0.5;
  background: yellow;

  /* puts empty space to the right of the box to separate it from the side panel */
  margin-right: 30px;
  margin-bottom: 30px;
  margin-top: 30px;
}

<h1>Guess the Rotation</h1>

  <!-- image that will be rotated -->
  <div id="object">
    <image src="connection.jpg" width="50"  id="image">
  </div>

  <!-- side panel -->
  <div id="sidePanel">
    <p id="">How many degrees is the image rotated?</p>
    <input type="number" min="0" max="359" placeholder="0-359" id="degrees">
    <button id="submitButton">Submit</button>
    <p id="rotationParagraph"></p>
  </div>

Rotate image by random amount on hover in Angular?

you can use

//in .ts
rotate(){
   return {transform:'rotate('+Math.random()*360+'deg)',
           'transform-origin':'50% 50%'}
}
//in .html
<img src="https://picsum.photos/200/300" [ngStyle]="style" 
  (mouseout)="style=null" 
  (mouseover)="style=random()">

or

random(){
  return Math.random()*360+'deg'
}

//and in .html
<img src="https://picsum.photos/200/300" [ngStyle]="{transform:'rotate('+rotation+')'}"
  (mouseout)="rotation=null" 
  (mouseover)="rotation=random()">

If you want to change the "rotation" of an image. But Really you should put your code in a *ngFor (or in two) to make the things more confortable -it's not practice- and use an array of "rotations" or similar

Images are randomly rotated by CSS

I don't think this is an issue with CSS.
Most likely, the image has been taken with a smart phone, or something similar. When the device is rotated it does not actually rotate the image when it's taken (probably because it's too much processing), but it instead sets a flag in the image properties to indicate to the image viewer that the image should be rotated (GIMP will prompt you when you open such a file).

So the problem you're having is that Chrome displays the image correctly, because it know what to do with it, but in the element inspector and your GUI program a more light weight approach to rendering the graphic is used and thus it appears in the original "as is" way - i.e it ignores the image properties hinting the need to rotate.

What you can do is open the image in GIMP or whatever other program you use and save the image in the desired orientation.

I hope that helped.

Randomly rotate image from its last position with CSS3

You need to get into some math to achieve what you want to do, hopefully it's not too difficult to understand...

var degrees=0, seconds=0, previousRotation=0;

$("#spinner").click(function(){
 previousRotation = degrees;
 degrees+= parseInt(Math.random() * 360 + 180);
  //you should adjust this formula
   miliseconds = parseInt((degrees - previousRotation)) * 5;
    $(this).css({
        "-webkit-transform" : "rotate("+ degrees +"deg)",
        "-webkit-transition-duration" : miliseconds + "ms"
    });
});

I'm using CSS Transitions instead of animations because they are more simple.

The miliseconds = ... formula makes the transition last longer if there's more degrees to be transitioned. Hopefully you can integrate all of this into the code you already wrote.

You can see a demo here: http://jsfiddle.net/XkNrf/

Make an image that spins to a random value add up the random values

var angle = 0;
var blocked = false;
var wheel = document.querySelector('#wheel');wheel.addEventListener('click', () => {  if (blocked) return;
  var deg = 720 + Math.round(Math.random() * 2000);  angle += deg;
  wheel.style.transform = "rotate(" + angle + "deg)";  blocked = true;  setTimeout(function() {    blocked = false;  }, 2100);}, false);

.placeholder {  display: block;  width: 200px;  height: 200px;  background-color: red;}
img {  transition: transform 2s ease-out;}

<img id="wheel" class="placeholder" >

Rotating Image In Increments On Click

You will need to get the current rotation value, then add 36 to that, then use that value for setting the rotation of the element:

$( ".crossRotate" ).click(function() {
    var rotation = getRotationDegrees($(this)) + 36;
    $(this).css("transform","rotate("+rotation+"deg)");
});

Getting the degree is rotation is actually kind of tricky, I'm using this answers solution to do that.

Fiddle Example

---

Edit
Acually there is a better way to handle this, we can simply have a variable store the degrees and increment that by 36. The problem with the element suddenly moving around 360 degrees in the other direction is due to the rotation going from some number around 360 to a number close to above 0. It detects that as being smaller and hence goes counter-clockwise. How the element stores it's rotation will by default do %360 on the angle, but simply going over 360 and never resetting the angle to a lower value will make it so it never go counter-clockwise.

var degrees = 0;
$( ".crossRotate" ).click(function() {
    degrees += 36;
    $(this).css("transform","rotate("+degrees+"deg)");
});

Fiddle Example

I want to rotate a div randomly, when i click a button

There is no rotate() method, you need apply the css style property instead. You can refer the following question : How to set the style -webkit-transform dynamically using JavaScript? or Rotate a div using javascript. Also you need to move the variable spin inside the function if you want to generate random values on each click.

var pijl = document.querySelector("#arrow");var knop = document.querySelector("#bottom");
knop.addEventListener("click", draai);
function draai(evt) {  var spin = Math.round(Math.random() * (360));  pijl.style.transform = 'rotate(' + spin + 'deg)';}

<div id="arrow" style="margin:50px;width:50px;height:20px;background:red">arrow</div><button id="bottom">click</button>

---

Related Topics