Html 背景图像上的 CSS3 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7309110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transition on a background image
提问by Dominique
I want to do an CSS3 transform: rotate(360deg); in a transition 1s; on a background image instead of a seperate image(element).. Is this possible? I have searched the hell out of Google but no succes! What I am trying to achieve is something like:
我想做一个 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);
}
I hope this is possible! I know it is easily doable in JS (jQuery) with:
我希望这是可能的！我知道它在 JS (jQuery) 中很容易做到：
$('#something').hover(function(){morecodehere});
...but I want to know if it is possible with only CSS(3)
...但我想知道是否可以仅使用 CSS(3)
HTML:
HTML：
<div id="footerLogo">
<img src="carenza.png"/>
</div>
采纳答案by Andres Ilich
Sure you can, try something like this:
当然可以，试试这样的：
HTML
HTML
<div id="planet">
</div>
CSS
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);}
}
回答by Matt Gibson
I don't think you can apply a transform to the background image itself (separately from the div.) However, you can rotate the whole div, including using a transition to animate it (here's a working example.)
我认为您不能对背景图像本身应用变换（与 div 分开）。但是，您可以旋转整个 div，包括使用过渡来为其设置动画（这是一个工作示例。）
It might help if you could describe the exact effect you want to achieve?
如果您能描述您想要达到的确切效果，这可能会有所帮助？
Code:
代码：
#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);
}
