CSS Image-Rotation-Transformation

Habe ich diese jsfiddle, und ich dachte, es würde das Bild ständig drehen, aber es funktioniert nicht.

Den HTML Verwendet:

<img class="rotate" src="http://www.arcelormittal.com/distributionsolutions/content/images/reload_captcha.png" />

CSS Verwendet:

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

Warum wird das Bild nicht ständig drehen?

InformationsquelleAutor Get Off My Lawn | 2013-07-12
  1. 4

    Benötigen Sie eine animation, da es nicht über eine start-und eine Ende um den übergang von:

    .rotate {
    -webkit-animation: spin .8s infinite linear;
    animation: spin .8s infinite linear;
}
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@keyframes spin {
    100% {
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
    • Im Grunde die gleiche Sache, nur entfernen, hover - stackoverflow.com/questions/7988962/...
    • Süß, das funktioniert! Danke!
    • Aktualisiert zu beheben meine Fehler in der syntax (es ist nicht @-keyframes...)
    InformationsquelleAutor kalley
  2. 0
    <!DOCTYPE html>
<html>
<head>
    <style> 
        div
        {
            width:200px;
            height:100px;
            margin-top:100px;
            background-color:yellow;
            /* Rotate div */
            transform:rotate(90deg);
            -ms-transform:rotate(90deg); /* IE 9 */
            -webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
        }
    </style>
</head>
<body>
    <div><img src="http://www.rltech.co.in/01/images/rllogo.png"/></div>
</body>
</html>
    • Bitte fügen Sie einige Inhalte auf Ihre Antwort. Code nur Antworten sind nicht geschätzt.
    InformationsquelleAutor user3636631
Schreibe einen Kommentar