Wie drehen Sie ein Bild horizontal mit CSS

Muss ich drehen Sie ein Bild horizontal. In der Regel verwenden wir gifs zu zeigen, dass etwas geladen wird, wie ein AJAX-request zum Beispiel. Ich fand dieses Beispiel aber es zeigt eine vertikale Drehung. Ich möchte eine animation wie diese eine.

Wie kann ich das mit CSS und jQuery?

InformationsquelleAutor Pablo Anaya | 2013-11-26
  1. 10

    Recherche habe ich eine Antwort gefunden auf meine Frage. Wir müssen die rotateY Attribut für die -webkit-transform CSS-Eigenschaft.

    .imageRotateHorizontal{
    -moz-animation: spinHorizontal .8s infinite linear;
    -o-animation: spinHorizontal .8s infinite linear;    
    -webkit-animation: spinHorizontal .8s infinite linear;
    animation: spinHorizontal .8s infinite linear;
}

@keyframes spinHorizontal {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* Vendor specific keyframes go here */

    Darüber hinaus haben wir eine animation mit einer angemessenen Frist. Zum Beispiel werde ich um die animation zu 0,8 Sekunden. Es bedeutet, dass unser Bild gehen, um führen Sie eine vollständige umdrehung in jede 0,8 Sekunden.

    Ich habe vorbereitet ein jsFiddle zeigt den vollständigen code der Breite ein Beispiel: http://jsfiddle.net/AB277/7/

    • -webkit-transform innen -moz-keyframes? Sieht aus wie Sie nicht vollständig verstehen, was Sie tun. Und wo ist die standard-Eigenschaft?
    • Sie haben Recht, @Pavlo. Es war eine falsche copy&paste in Eile heute morgen. Sorry dafür und vielen Dank für Ihre Kommentare.
    • Danke, @PabloAnaya für dieses posting eine Antwort und bietet jsfiddle!
    InformationsquelleAutor Pablo Anaya
Schreibe einen Kommentar