CSS3 переход на фоновом изображении

Question

Я хочу сделать преобразование CSS3: вращаться (360deg); В переходе 1s; На фоновом изображении вместо отдельного изображения (элемент) .. это возможно? Я искал чертовски из Google, но без успеха! Я пытаюсь достичь чего -то вроде:

#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);
}

Надеюсь, это возможно! Я знаю, что это легко выполнимо в JS (jQuery) с:

$('#something').hover(function(){morecodehere});

... но я хочу знать, возможно ли это с CSS (3)

HTML:

<div id="footerLogo">
  <img src="carenza.png"/>
</div>

Answer 1

Конечно, вы можете, попробуйте что -то вроде этого:

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

Answer 2

Я не думаю, что вы можете применить преобразование к самому фоновому изображению (отдельно от Div.) Однако вы можете повернуть весь Div, включая использование перехода для его анимирования (Вот рабочий пример.)

Это может помочь, если бы вы могли описать точный эффект, который вы хотите достичь?

Код:

#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);
}