Drehen Sie ein Hintergrundbild mit CSS3

Ich habe ein hintergrund Bild, das einen Pfeil nach rechts. Wenn ein Benutzer auf die Schaltfläche klickt, wird der ausgewählte Status-änderungen der Pfeil nach unten zeigen (mit einem anderen hintergrund position in meinem image-sprite).

Ist es irgendwie animieren Sie diese mit CSS3 so dass, sobald der button geklickt wird und jQuery weist einen "selected" - Klasse, es dreht sich in einer animation (nur 90°) von rechts nach unten? (vorzugsweise mit dem einzigen Bild/position mit dem Pfeil, der nach rechts zeigt)

Ich bin nicht sicher, ob eine Transformation oder key-frames einer animation verwendet werden müssen.

Siehe auch: Wie dreht man das Hintergrundbild in den container?

InformationsquelleAutor Cofey | 2013-03-02

  1. 19

    könnten Sie die ::after (oder ::before) pseudo-element, um die animation zu

    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>

    in Ihrem Fall werden Sie Verwendung element.ausgewählt-Klasse statt

    jsfiddle demo: http://jsfiddle.net/p8kkf/

    hoffe, das hilft

    gibt es einen Unterschied zwischen :after und ::after ?
    ::nach mehr korrigieren, aber :nach besser unterstützt, die beide sich auf das gleiche beziehen
    Super toll 😉 Danke Mann!

    InformationsquelleAutor

  2. 9

    Hier ist eine rotierende css-Klasse, die ich verwendet, um zu Spinnen, ein hintergrund-Bild:

    .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);
  }
}
    Vielen Dank für den code. Ich habe nicht versucht es noch, aber wird das auch drehen Sie den Pfeil von unten an die richtige position, wenn die ausgewählte Klasse wird entfernt?
    Sie müssen manuell positionieren Sie den Pfeil nach rotation. Ich mag @wes ' Vorschlag, die :after pseudo-element.

    InformationsquelleAutor Teddy

Schreibe einen Kommentar