9

我想做一个 CSS3 变换：rotate(360deg); 在过渡 1s；在背景图像上而不是单独的图像（元素）上。这可能吗？我已经从谷歌搜索了地狱，但没有成功！我想要实现的是：

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

2 回答 2

11

当然可以，试试这样的：

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

于 2011-09-05T16:02:07.867 回答
5

我不认为您可以将变换应用于背景图像本身（与 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);
}
于 2011-09-05T15:26:00.190 回答