Je veux faire pivoter l'image qui est placée dans le bouton de la barre de défilement dans Chrome. J'ai maintenant un CSS avec ce contenu :
::-webkit-scrollbar-button:vertical:decrement
{
background-image:url(images/arrowup.png) ;
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
background-repeat:no-repeat;
background-position:center;
background-color:#ECEEEF;
border-color:#999;
}
Je souhaite faire pivoter l'image sans faire pivoter son contenu.
Très bien fait et répondu ici - [http://www.sitepoint.com/css3-transform-background-image/] [1]
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
[1] : http://www.sitepoint.com/css3-transform-background-image/
C'est également ce que je cherche à faire. J’ai une grande image en forme de carreau (littéralement une image de carreau) que j’aimerais faire pivoter d’environ 15 degrés et faire répéter. Vous pouvez imaginer la taille d'une image qui se répéterait sans problème, ce qui rendrait la réponse du "programme d'édition d'images" inutile.
Ma solution a consisté à donner l'image non tournée (une seule copie :) à un élément psuedo :before - à la surdimensionner - à la répéter - à définir l'overflow du conteneur sur hidden - et à faire tourner l'élément :before généré à l'aide de css3 transforms. C'est parti !
CSS:
.reverse {
transform: rotate(180deg);
}
.rotate {
animation-duration: .5s;
animation-iteration-count: 1;
animation-name: yoyo;
animation-timing-function: linear;
}
@keyframes yoyo {
from { transform: rotate( 0deg); }
to { transform: rotate(360deg); }
}
Javascript:
$(buttonElement).click(function () {
$(".arrow").toggleClass("reverse")
return false
})
$(buttonElement).hover(function () {
$(".arrow").addClass("rotate")
}, function() {
$(".arrow").removeClass("rotate")
})
PS : J'ai trouvé ceci ailleurs mais je ne me souviens pas de la source.