Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Rotate div on page load

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #45855
    danielpox
    Member

    Hi, I want to rotate a div using @keyframes on the page load, but I just can’t get it to work. Any ideas of how to code? :/

    #140637
    pixelgrid
    Participant

    1 -make a class holding the animation declaration.

    2 – on page load add that class to the element you want

    3 – enjoy the magic.

    //CSS
    .className{
    animation:turn 1s linear;
    }

    @keyframes turn{
    100%{transform:rotate(360deg)}
    }
    //jQuery
    $(function(){
    $(‘.myElement’).addClass(‘className’);
    });

    note that animation keyframes and transform require vendor prefixes

    #140642
    danielpox
    Member

    Hmm.. Still can’t get it to work.. As you can see in the example here.

    #140645
    pixelgrid
    Participant

    you have a javascript error on your page

    trying to set the height of section with a mix of vanilla js and jquery.

    either

    $(‘section’)[0].style.height = ‘100% – ‘ + $(‘header’).style.height + ‘px’; // added a [0] after the jquery selector

    or

    $(‘section’).css(‘height’, ‘100% – ‘ + $(‘header’).style.height + ‘px’);

    note you dont have a section to your document

    #140647
    danielpox
    Member

    Oh, yeah, that’s my original js file that I also use for the main index file

    #140713
    danielpox
    Member

    I figured it out by myself, you can see it [here](http://www.poxmedia.net/ “Here”). The button in the top left corner spins every minute :P

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.