CSS3 arrière-plan de rotation de l'animation dans la souris passe dessus

voici mon div.

   #div1{
        position:   absolute;
        top:        50%;
        left:       50%;
        margin-left:-100px;
        margin-top: 420px;
        width:      158px;
        height:     158px;
        background-image:url(images/background.png);
    }

Je besoin d'une image d'arrière-plan de rotation de l'animation à 360 degrés de la souris sur l'événement. Quelqu'un peut-il m'aider? merci.

OriginalL'auteur Sasindu Hewage | 2012-09-20

  1. 3

    voici votre demande:

    jsFiddle Démo

        <div id="div1">rterterrt
teteterrtetre<div id="div2">
</div></div>

    .

     #div1{
        position:   absolute;
        top:        50%;
        left:       50%;
        margin-left:-100px;
        /*margin-top: 420px;*/
        width:      158px;
        height:     158px;

}
#div2{


        /*margin-top: 420px;*/
        width:      158px;
        height:     158px;
        background-image:url(http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg);
}

#div2:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}
​
    une rotation de la div dans son ensemble.
    quelle est la différence de la demande de l'utilisateur de mon résultat ?
    Le div pourrait avoir du contenu du texte dont il ne veut pas en rotation. Dans ce cas, vous devez envelopper le contenu dans un div (ou un autre tag) et le faire tourner dans la direction opposée ou utiliser l'arrière-plan sur les pseudo-élément qui est absolument position pour la div et pivoter que le pseudo-élément la place.
    entendez-vous à jsfiddle Démo
    Pas tout à fait. Le texte doit être à l'intérieur de la div qui a le fond de la rotation. Plus comme ceci dabblet.com/gist/3754605 (rotation de l'enfant pour annuler la rotation du parent). Ou comme ceci (ne fonctionne que dans les FF) dabblet.com/gist/3754578 (en arrière-plan sur les pseudo-élément & tourner pseudo-élément). Ou comme ceci dabblet.com/gist/3754586 (en arrière-plan sur la position absolue de l'enfant au lieu de pseudo-élément).

    OriginalL'auteur yossi

  2. 1

    Vous ne pouvez pas faire pivoter l'image de fond en CSS (niveaux 2 et 3) moyens.
    Donc, la seule option pour vous est d'utiliser l'élément séparé avec cette image et faire pivoter/animer cet élément comme un tout.

    Mais vous serez en mesure de le faire dans CSS niveau 4.

    OriginalL'auteur c-smile

  3. 0

    Vous pouvez utiliser des pseudo éléments pour réaliser cette

    #div1{
        position:   absolute;
        top:        50%;
        left:       50%;
        margin-left:-100px;
        margin-top: 420px;
}
#div:before {
   content: "";
   position: absolute;
   width: 158px;
   height: 158px;
   background-image:url(images/background.png);
   transition: all 1s linear;
}

#div:hover:before {
    transform:rotate(360deg);
}

    OriginalL'auteur Tatubolitex

  4. 0

    Faire pivoter l'image de fond sur :hover en Utilisant uniquement du Code CSS.

    http://designshack.net/tutorialexamples/multiplebackgrounds/index.html

    Post code.

    OriginalL'auteur Chintan Patel