How to rotate the background image in css?

Tags: html,css,css3,css-animations

Problem :

I have a custom radiobutton image. I am trying to rotate the background image alone when some one chooses the option. But it rotates the the whole div.

here is my partially working jsFiddle

ul.pt-answers > li > label > input:checked +img {  
    background: url(http://www.opinionpoll.in/files/images/vote_symbol.png);
    background-repeat: no-repeat;
    background-position:center center;
    background-size:30px 30px;
    -webkit-animation:spin 0.5s ease 1 both;
    -moz-animation:spin 0.5s ease 1 both;
    animation:spin 0.5s ease 1 both;
    border:none;

}


@-moz-keyframes spin { 100% { -moz-transform: rotate(30deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(30deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(30deg); } }

---

Solution :

I suggest you use the <div> element tag instead of <img> so you can create a pseudo ::before element in it. You can specify the css select to create the pseudo ::before element, assign the background properties and apply the spin, viola!

You can see what I mean in your updated fiddle here.

Get additional information here.

edit: spelling