web-dev-qa-db-fra.com

Comment faire pivoter l'image de fond dans le conteneur?

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.

cssbackground-imageimage-rotation
139
priya

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);
}
131
Anmol Saraf

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

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

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

Ma solution a été de donner à l'image non retournée (une seule copie :) l'image tuilée en psuedo: avant élément - la surdimensionner - la répéter - définir le débordement du conteneur sur masqué - et faire pivoter l'élément généré: before en utilisant des transformations css3. Étalages!

5
Simon Seddon

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

4
user2129794

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

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

Bonne chance...

3
Akash