CSS3 переход на фоновое изображение - PullRequest
Новая
       34

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

9 голосов
/ 05 сентября 2011

Я хочу сделать CSS3-преобразование: rotate (360deg); в переходе 1с; на фоновом изображении вместо отдельного изображения (элемента) .. Это возможно? Я чертовски искал в 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>

Ответы [ 2 ]

9 голосов
/ 05 сентября 2011

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

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

5 голосов
/ 05 сентября 2011

Я не думаю, что вы можете применить преобразование к самому фоновому изображению (отдельно от 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);
}
...