CODEWITHSUNDEEP
css
user1554264
user1554264

Reputation: 1224

Using -moz-transform on a div element

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;       
}

Upvotes: 1

Views: 157

Answers (2)

Don H
Don H

Reputation: 901

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);}
}

Upvotes: 1

matthias.p
matthias.p

Reputation: 1544

Rotating an object by 360 degrees results in the same object. That's why you don't see any change. You could try other degrees, e.g. 180deg. Only if you would apply a css transition on the transform property, you might see an effect with rotate(360deg).

There is a webkit version of this property, simply -webkit-transform. You should also add the property without any vendor prefixes, because the support for the prefixed versions will maybe dropped some day.

Edit: To rotate continuously: 

@-moz-keyframes rotate {
 from {
  -moz-transform: rotate(0deg);
 }
 to {
  -moz-transform: rotate(360deg);
 }
}
@-webkit-keyframes rotate {
 from {
  -webkit-transform: rotate(0deg);
 }
 to {
  -webkit-transform: rotate(360deg);
 }
}
@keyframes rotate {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}
#sun {
 -moz-animation: rotate 5s linear infinite;
 -webkit-animation: rotate 5s linear infinite;
 animation: rotate 5s linear infinite;
}

Upvotes: 1

Related Questions