CSS3 /CSS - spinning background image

Question

is it possible to spin a background-image in css?

i can spin an element using:

@-webkit-keyframes spinX
{  
0%   {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}  
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}  
}

@-webkit-keyframes spinY
{  
0%   {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}  
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}  
}

but what about if i want to spin an element's background-image?

can't find nothing, i can use gif but i would like to make it in css if possible !

any idea? thanks

i forgot to say if is possible to make the animation cross-browsers supported :P

have a look at this: http://www.sitepoint.com/css3-transform-background-image/ — Pevara, Jun 05 '13 at 21:02
Now a days to make it cross-browser just remove all `-webkit-` prefixes. Updated browser FTW — Vitor Canova, Aug 20 '14 at 16:58

vals · Accepted Answer · 2015-05-08T12:08:38.097

You can do that setting the background on a pseudo element, for instance an after

.main {
    width: 200px;
    height: 300px;
    position: relative;
    border: solid 1px gray;
}

.main:after {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url("http://placekitten.com/800/1200");
    background-size: cover;
    content: '';
    -webkit-animation: spinX 3s infinite;
    animation: spinX 3s infinite;
}

@-webkit-keyframes spinX
{  
0%   {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}  
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}  
}
@keyframes spinX
{  
0%   {transform: rotateX(0deg); transform-origin: 0% 50% 0;}  
100% {transform: rotateX(360deg); transform-origin: 0% 50% 0;}  
}

<div class="main"></div>

demo

score 6 · Answer 2 · answered Jun 05 '13 at 21:05

6

You could put the background on a pseudo element, like ::before and animate that.

Example, and another one :)

If you have content above the image, add z-index: -1 to the pseudo element.

answered Jun 05 '13 at 21:05

nice ass

16,471
7
50
89

2

+1 I just couldn't stop watching this creature in your example - ginning and galloping lol ^_^ – Martin Turjak Jun 05 '13 at 21:12
@One Trick Pony is possible that your animation example are only supported by webkit browsers? no way for full browser support? :P – itsme Jun 06 '13 at 07:22
It works in all browsers, just add a `-moz` version and a non-prefixed version - [check this fiddle](http://jsfiddle.net/M58r7/4/). I used webkit only because you had in your Q only webkit properties – nice ass Jun 06 '13 at 11:04
1

Actually you can drop the `-moz` properties. It seems that Firefox now supports non-prefixed `animation` and `keyframes`, like IE and Opera :) – nice ass Jun 06 '13 at 11:06

CSS3 /CSS - spinning background image

2 Answers2

Linked