Je veux faire pivoter l'image qui est placée dans le bouton de la barre de défilement dans Chrome. Maintenant, j'ai 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/

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

Méthode très simple, vous faites pivoter dans un sens et le contenu dans l'autre. Nécessite un carré cependant

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

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é ça ailleurs mais je ne me souviens pas de la source

Je cherchais à faire cela aussi. J'ai une grande image de mosaïque (littéralement une image de mosaïque) que je voudrais faire pivoter d'environ 15 degrés et que je répète. Vous pouvez imaginer la taille d'une image qui se répéterait de manière transparente, rendant inutile la réponse du «programme d'édition d'image».

Ma solution était de donner l'image de tuile non pivotée (juste une copie :) à psuedo: before element - surdimensionner - le répéter - définir le débordement de conteneur sur hidden - et faire pivoter l'élément généré: before en utilisant les transformations css3. Étalages!

Mise à jour 2020, mai:

Réglage position: absolutepuis transform: rotate(45deg)fournira un arrière-plan:

div {
  height: 200px;
  width: 200px;
  outline: 2px dashed slateBlue;
  overflow: hidden;
}
div img {
  position: absolute;
  transform: rotate(45deg);
  z-index: -1;
  top: 40px;
  left: 40px;
}

<div>
  <img src="https://placekitten.com/120/120" />
  <h1>Hello World!</h1>
</div>

Réponse originale:

Dans mon cas, la taille de l'image n'est pas si grande que je ne peux pas en avoir une copie pivotée. Ainsi, l'image a été tournée avec photoshop. Une alternative à la photoshoprotation des images est également un outil en ligne pour la rotation des images . Une fois la rotation effectuée, je travaille avec le rotated-imagedans la backgroundpropriété.

div.with-background {
    background-image: url(/img/rotated-image.png);
    background-size:     contain;
    background-repeat:   no-repeat;
    background-position: top center;
}

Bonne chance...