Hvordan rotere bakgrunnsbildet i beholderen?

Question

Mer

Kilde Ikke AMP-versjon Rediger

Hvordan rotere bakgrunnsbildet i beholderen?

Jeg ønsker å rotere bildet som er plassert i knappen på rullefeltet i Chrome. Nå har jeg en CSS med dette innholdet:

::-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;
}

Jeg ønsker å rotere bildet uten å rotere innholdet.

unor

Redigerte spørsmål 14. februar 2015 в 12:50

Programmering

css background-image image-rotation

23. februar 2011 в 5:44

3 visninger

Anmol Saraf · Answer 1 · 2013-03-06T15:20:43+00:00

Veldig bra gjort og besvart her - 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);
}

Simon Seddon · Answer 2 · 2012-05-23T09:21:42+00:00

Jeg var ute etter å gjøre dette også. Jeg har et stort flisebilde (bokstavelig talt et bilde av en flis) som jeg ønsker å rotere med bare omtrent 15 grader og få gjentatt. Du kan forestille deg størrelsen på et bilde som ville gjentas sømløst, noe som gjør 'bilderedigeringsprogrammet' svaret ubrukelig.

Løsningen min var å gi det ikke-roterte (bare én kopi :) flisebildet til et psuedo :before-element - overdimensjonere det - gjenta det - sette containerens overflow til hidden - og rotere det genererte :before-elementet ved hjelp av css3 transforms. Bosh!

user2129794 · Answer 3 · 2013-04-30T19:51:00+00:00

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: Jeg har funnet dette et annet sted, men husker ikke kilden.