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


    CSS Howto..

    How to set line spacing of an ordered list consistently across browsers?

    CSS - How to align 2 fields into 1 row?

    How to change html background dynamically

    How to set color on mouse hover - css

    How can i display all buttons to right in bootstrap panel heading?

    How to override css attribute-only style

    css responsive background image not showing

    How do I apply css code for svg in google api charts

    how to make zurb foundation framework off canvas look flat

    how to make background css url dynamic using jquery

    how can I access a css class from the appended html div?

    How do I select certain siblings via CSS?

    how to load the content onclik menu?

    How can a directory/folder name affect page rendering?

    How to add spacing to text start in css

    CSS: how can I hide a div when its text doesn't fit?

    How to get CSS transform rotation value in degrees with JavaScript

    How can I align a div right under another?

    How to get CSS attributes assigned to a html table?

    How to call particular CSS file only for desktop not for mobile [closed]

    css scroll/touch slide view - how to use -ms-scroll-snap or the like?

    How to control the appearance of a widget on client web sites CSS

    How to set % height in fluid layout?

    How to place the text in the top right corner and not show buttons when printing

    Flex 4 How to set background image to VBox?

    How do I use PHP to apply css properties? [closed]

    How to stretch an element out vertically so that it is always at least as tall as its sibling?

    How to arrange images at middle of vertical using css?

    Cannot figure out how to center multiple links in a navigation bar using CSS

    CSS exit box how to? [closed]