背景图像上的CSS3过渡

我想做一个CSS3变换:旋转(360度);在一个过渡中;在背景图像上，而不是单独的图像(元素)..这可能吗?我用谷歌搜索了很多遍，但是没有成功!我想要实现的是:

#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>

当然可以，试试这样做:

<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

我不认为你可以对背景图像本身(与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); }

相关内容

最新更新

热门标签：