Question

I’m trying to make the <div id = "sun"> tag containing the png image of sun rotate 360 degrees, so the appearance is that the sun is animated and moving around and around. It seems that the rotate property alone my not be sufficient. Here is the webpage I am applying it to:

http://www.manchestergardeningservices.co.uk/

and here is the webpage that has the effect working I am trying to achieve:

http://outsideapp.com/

Here is the transform CSS property I have applied in my styling for the element. May I ask if I have applied the property in the wrong way? And my second question – is there a webkit version of this CSS property?

#sun {  
    -moz-transform: rotate(360deg);
    float: left;
    height: 350px;
    margin-left: -100px;
    margin-right: 0;
    margin-top: -185px;
    width: 350px;
    z-index: 100;  
    display: inline;       
}

Answer 1

I think you’re looking to animate it, rather than simply transform it. A transform won’t be an animation, it’ll just show the final result.

Here’s an overview of keyframe animation using CSS: http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/

Here’s a quickly mocked up version to illustrate how the animation can be applied to a div: http://jsfiddle.net/donovanh/rhEnY/

Note: prefixes

^ The above includes prefixes for the major browsers as well as the unprefixed version for when the prefixes are dropped. It’s important to not rely on a specific prefix (such as -moz) as they are only meant as temporary measures until the CSS is properly supported and the prefix is dropped.

In case JSFiddle deletes the example, here’s the CSS:

#sun {
    background-color: yellow;
    border: 5px solid black;
    border-radius: 20px;
    width:50px;
    height:50px;
    margin:20px;
     -webkit-animation: rotateAnimation 5s infinite linear;
     -moz-animation:    rotateAnimation 5s infinite linear;
     -ms-animation:     rotateAnimation 5s infinite linear;
     -o-animation:      rotateAnimation 5s infinite linear;
     animation:         rotateAnimation 5s infinite linear;
}

@-webkit-keyframes rotateAnimation {
    0%   { -webkit-transform:rotate(0);}
    100%   { -webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotateAnimation {
    0%   { -moz-transform:rotate(0);}
    100%   { -moz-transform:rotate(360deg);}
}
@-ms-keyframes rotateAnimation {
    0%   { -ms-transform:rotate(0);}
    100%   { -ms-transform:rotate(360deg);}
}
@-o-keyframes rotateAnimation {
    0%   { -o-transform:rotate(0);}
    100%   { -o-transform:rotate(360deg);}
}
@keyframes rotateAnimation {
    0%   { transform:rotate(0);}
    100%   { transform:rotate(360deg);}
}