CSS 使用 CSS3 旋转背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15170820/
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
Rotating a background image with CSS3
提问by Cofey
I have a background image that has an arrow that points to the right. When a user clicks on the button, the selected state changes the arrow to point down (using a different background position in my image sprite).
我有一个背景图像，它有一个指向右侧的箭头。当用户单击按钮时，选定状态会将箭头更改为向下（在我的图像精灵中使用不同的背景位置）。
Is there anyway to animate this using CSS3 so once the button is clicked and jQuery assigns it a "selected" class, it will rotate in an animation (only 90 degrees) from the right to down? (preferably using the single image/position with the arrow that points to the right)
无论如何，是否可以使用 CSS3 对此进行动画处理，因此一旦单击按钮并且 jQuery 为其分配一个“选定”类，它将在动画中从右到下旋转（仅 90 度）？（最好使用带有指向右侧的箭头的单个图像/位置）
I'm unsure as to whether transform or key animation frames need to be used.
我不确定是否需要使用变换或关键动画帧。
回答by
you could use the ::after(or ::before) pseudo-element, to generate the animation
您可以使用::after(或::before)pseudo-element来生成动画
div /*some irrelevant css */
{
background:-webkit-linear-gradient(top,orange,orangered);
background:-moz-linear-gradient(top,orange,orangered);
float:left;padding:10px 20px;color:white;text-shadow:0 1px black;
font-size:20px;font-family:sans-serif;border:1px orangered solid;
border-radius:5px;cursor:pointer;
}
/* element to animate */
div::after /* you will use for example "a::after" */
{
content:' ?'; /* instead of content you could use a bgimage here */
float:right;
margin:0 0 0 10px;
-moz-transition:0.5s all;
-webkit-transition:0.5s all;
}
/* actual animation */
div:hover::after /* you will use for example "a.selected::after" */
{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
HTML:
HTML：
<div>Test button</div>
in your case you will use element.selected class instead of
在您的情况下，您将使用 element.selected 类而不是
jsfiddle demo: http://jsfiddle.net/p8kkf/
jsfiddle 演示：http: //jsfiddle.net/p8kkf/
hope this helps
希望这可以帮助
回答by Teddy
Here is a rotating css class that I have used to spin a background image:
这是我用来旋转背景图像的旋转 css 类：
.rotating {
-webkit-animation: rotating-function 1.25s linear infinite;
-moz-animation: rotating-function 1.25s linear infinite;
-ms-animation: rotating-function 1.25s linear infinite;
-o-animation: rotating-function 1.25s linear infinite;
animation: rotating-function 1.25s linear infinite;
}
@-webkit-keyframes rotating-function {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotating-function {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotating-function {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
@-o-keyframes rotating-function {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@keyframes rotating-function {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
