Randomly rotating html element

Question

I was looking to make a bunch of list items randomly rotated (and absolutely placed) on the screen and found out here that that can only be achieved with javascript, instead of css3 as my first attempts were.

I found a beautiful solution in this topic but it makes the rotation only when hovering. Since I'm no javascript expert, I wasn't able to do that on load, instead of hover.

After that I would find a way to do randomly input the top and left values, but if you already have that solution, I would love to hear it.

Thank you for your time :)

shanonvl · Accepted Answer · 2013-06-17T17:35:09.447

4

Per the referenced beautiful solution, you can just reuse that, but call it when the page is loaded, like this:

// this will be called onload
jQuery(function($) {
    // changed .hover to .each
    $('.photo').each(function() {
        var a = Math.random() * 10 - 5;
        $(this).css('transform', 'rotate(' + a + 'deg)');
    });
});

edited Jun 17 '13 at 17:35

answered Jun 13 '13 at 16:48

shanonvl

619
4
6

Thank you very much Shanon! This seems right to me, but I couldn't manage to make it do it. [Here's a codepen with my attempt](http://codepen.io/GuiHarrison/pen/ycwdf) – Digger Jun 17 '13 at 15:49
I've updated your codepen and tweaked the JS. It's working for me in Chrome, now: http://codepen.io/anon/pen/fIilF – shanonvl Jun 17 '13 at 17:34

lukaleli · Answer 2 · 2013-06-13T16:58:53.777

1

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

edited Jun 13 '13 at 16:58

answered Jun 13 '13 at 16:48

lukaleli

3,427
3
22
32

why on earth the setInterval? – Christoph Jun 13 '13 at 16:56
I thought he wants to animate it continuously. Edited now. – lukaleli Jun 13 '13 at 17:00

Randomly rotating html element

2 Answers2