web-dev-qa-db-fra.com

Rotation d'une image d'arrière-plan avec CSS3

J'ai une image d'arrière-plan qui a une flèche qui pointe vers la droite. Lorsqu'un utilisateur clique sur le bouton, l'état sélectionné change la flèche pour qu'elle pointe vers le bas (en utilisant une position d'arrière-plan différente dans mon image Sprite).

Y a-t-il une façon d'animer cela en utilisant CSS3 donc une fois que le bouton est cliqué et que jQuery lui attribue une classe "sélectionnée", il tournera dans une animation (seulement 90 degrés) de droite à bas? (en utilisant de préférence la seule image/position avec la flèche qui pointe vers la droite)

Je ne sais pas si la transformation ou les images d'animation clés doivent être utilisées.

csscss3rotationbackground-imagecss-animations
11
Cofey

vous pouvez utiliser le ::after (ou ::before) pseudo-element, pour générer l'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>

dans votre cas, vous utiliserez la classe element.selected au lieu de

Démo jsfiddle : http://jsfiddle.net/p8kkf/

j'espère que cela t'aides

19
user652649

Voici une classe css rotative que j'ai utilisée pour faire tourner une image d'arrière-plan:

.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);
  }
}
10
Teddy