使用 CSS3 旋转背景图像

问题描述

我有一个背景图像，其中有一个指向右侧的箭头.当用户单击按钮时，选定状态会将箭头更改为向下(在我的图像精灵中使用不同的背景位置).

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).

是否有使用 CSS3 对其进行动画处理的方法，所以一旦单击按钮并 jQuery 为其分配一个选定"类，它将在动画中从右到下旋转(仅 90 度)?(最好使用带有指向右侧的箭头的单个图像/位置)

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)

我不确定是否需要使用变换或关键动画帧.

I'm unsure as to whether transform or key animation frames need to be used.

推荐答案

你可以使用 ::after (或 ::before) 伪元素，生成动画

you could use the ::after (or ::before) pseudo-element, to generate the animation

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:

<div>Test button</div>

在您的情况下，您将使用 element.selected 类而不是

in your case you will use element.selected class instead of

jsfiddle 演示:http://jsfiddle.net/p8kkf/

希望对你有帮助

这篇关于使用 CSS3 旋转背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！