Comment faire pivoter l'image d'arrière-plan dans le conteneur ?

Question

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.

Answer 1

Très bien fait et répondu ici - http://www.sitepoint.com/css3-transform-background-image/

#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);
}

Answer 2

Méthode très simple, vous faites tourner dans un sens, et le contenu dans l'autre. Il faut cependant une équerre

#element{
    background : url('someImage.jpg');
}
#element:hover{
    transform: rotate(-30deg);
}
#element:hover >*{
    transform: rotate(30deg);
}

Answer 3

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.

Answer 4

Je cherchais également à faire cela. J'ai un grand carreau (littéralement une image d'un 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 été de donner l'image de la tuile non tournée (juste une copie :) à l'élément psuedo :before - de la surdimensionner - de la répéter - de mettre le conteneur overflow à hidden - et de faire tourner l'élément :before généré en utilisant les transformations css3. Et voilà !

Answer 5

#myelement
{
    position: relative;
    overflow: hidden;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

#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);
}