Html 背景图像上的CSS3转换

我想做一个CSS3变换：旋转（360度）；在一个过渡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）中是很容易实现的：

…但我想知道，仅使用CSS是否可行（3）

HTML:

---

我认为您不能将变换应用于背景图像本身（与div分开）。但是，您可以旋转整个div，包括使用过渡设置其动画（.）

如果你能描述一下你想要达到的确切效果，可能会有所帮助

代码：

---

当然可以，尝试以下方法：

HTML

<div id="planet">
</div>

---

下次添加代码块时，只需将整个代码块缩进4+个空格即可保留缩进。对内联代码使用backticks.smart，但它只需在鼠标上方进行转换，div包含1个或另一个IMG。想象；你有一个小明星形象（单独但一个原始标志的一部分）和该标志（“一些名字”）旁边的其他部分。如果我将鼠标悬停在div（两幅图像中的一幅）上，则只有恒星旋转。只有CSS3。。但仍然是一个很好的例子：-）！现在，我正试图编辑您的代码，以实现这样一种效果：如果您的鼠标不再在css3上悬停，星星将旋转回来（回到起点），那么您将无法继续操作（至少我不知道）。悬停状态是非常线性的，不允许您在悬停状态和关闭悬停状态之间转换，您可以使用javascript进行转换。是的，您可以使用JS解决问题，但挑战是在CSS3中完成此操作；）。。我以前已经做到了；要实现过渡，可以使用“onmouseout”（你可能会这么称呼它），但我已经得到了很多帮助，主要问题已经得到了回答（我想是吧？）。我想我不能在同一个线程中问这个问题。好吧，我认为使用任何其他类型的转换都很简单，例如padding，你可以操纵它在：hover state上使padding增加10px，在：active state上降低padding，但是像旋转这样抽象的东西，我不认为仅仅使用css就可以达到特定的程度。同样，我可能是错的，我每天都在CSS3中看到一些新的东西。不固定的css声明应该永远是最后一个！您希望在标准实现就绪后使用它，而不是用特定于浏览器的实现覆盖它，否则可能会出现问题。@gondo在2011年，我怀疑有人会这么想：）我会改变顺序。

<div id="footerLogo">
  <img src="carenza.png"/>
</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);
}

<div id="planet">
</div>

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