Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 /CSS - spinning background image

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

like image 323
itsme Avatar asked Jun 05 '13 20:06

itsme


People also ask

Can I rotate background in CSS?

Approach: The CSS transform property is used to apply two-dimensional or three-dimensional transformation to a element. This property can be used to rotate, scale, move or even skew an element.

How do I flip a background image in CSS?

Flipping an Image Element We can flip the img element using the CSS transform property. We can do so using the scaleX and scaleY transforms. The CSS to flip it. The rotation transform is also a nice choice for when you want to animate the flip.

How do I make a background image opaque in CSS?

There's no CSS property that you can use to change the opacity of only the background image. Unlike background colors, which allow you to adjust the alpha channel to control opacity, it simply doesn't exist for the background-image property.


2 Answers

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

like image 176
vals Avatar answered Oct 12 '22 10:10

vals


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.

like image 23
nice ass Avatar answered Oct 12 '22 10:10

nice ass