I want to do an CSS3 transform: rotate(360deg); in a transition 1s; on a background image instead of a seperate image(element).. Is this possible? I have searched the hell out of Google but no succes! What I am trying to achieve is something like:
#footerLogo {
background: url('ster.png'),
-moz-transition: -moz-transform 1s,
transition: transform 1s,
-o-transition: -o-transform 1s,
-webkit-transition: -webkit-transform 1s;
background-position: #outlinedtotheleft;
}
#footerLogo:hover {
background: transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
I hope this is possible! I know it is easily doable in JS (jQuery) with:
$('#something').hover(function(){morecodehere});
...but I want to know if it is possible with only CSS(3)
HTML:
<div id="footerLogo">
<img src="carenza.png"/>
</div>
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.
Definition and Usage. The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.
Sure you can, try something like this:
HTML
<div id="planet">
</div>
CSS
#planet {
width:200px;
height:200px;
background: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center;
}
#planet {
-webkit-animation-name: rotate;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
@-webkit-keyframes rotate {
from {-webkit-transform:rotate(0deg);}
to { -webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotate {
from {-moz-transform:rotate(0deg);}
to { -moz-transform:rotate(360deg);}
}
JSFiddle
I don't think you can apply a transform to the background image itself (separately from the div.) However, you can rotate the whole div, including using a transition to animate it (here's a working example.)
It might help if you could describe the exact effect you want to achieve?
Code:
#footerlogo {
width: 200px;
height: 200px;
background-image: url(http://lorempixum.com/200/200);
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
}
#footerlogo:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With