160

Chcę obrócić obraz, który jest umieszczony na przycisku paska przewijania w Chrome. Teraz mam CSS z taką zawartością:

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

Chcę obrócić obraz bez obracania jego zawartości.

css background-image image-rotation

— priya
źródło

1

Też chciałbym to zrobić. Jest przykład czegoś takiego, co dzieje się w iCloud - zobacz, jak tekstura skarbca obraca się dynamicznie: icloud.com

— Subcreation

to wygląda trochę jak coś z paralaksą. nie mogłem nic powiedzieć po kodzie ...

— szeryfderek

Myślę, że może już nie potrzebujesz i nie odpowiadasz, ale może ktoś inny byłby zainteresowany. Oto link do samouczka, który pokazuje, jak to zrobić: http://www.sitepoint.com/css3-transform-background-image/

— Ayoub M.,

Niestety wszystkie podane rozwiązania nie działają w paskach przewijania. Skończyło się na stworzeniu 4 oddzielnych zdjęć.

— ameba

1

Zobacz także: Obracanie obrazu tła za pomocą CSS3

— unor

141

Bardzo dobrze zrobione i udzielono odpowiedzi tutaj - 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);
}

— Anmol Saraf
źródło

2

FYI, kontenery obracają się wokół swojego punktu środkowego, na wypadek gdybyś miał problemy z uzyskaniem dokładnie takiej transformacji, jaką chcesz.

— Nick Larsen

fyi, to nie działa dla wszystkich elementów; na przykład selectnie może mieć :before.

— Yann Dìnendal

1

Uważaj też, że 200% może nie wystarczyć we wszystkich przypadkach, np. Na podłużnych elementach, takich jak 10px × 200px.

— Henrik Christensen

4

Tak, ale to nie jest obracanie tła. To jest udawanie z przybliżeniem. Jeśli rzeczywiście potrzebujesz obracać tło, to nie pomoże.

— dev_willis,

22

Bardzo prosta metoda, obracasz w jedną stronę, a zawartość w drugą. Wymaga jednak kwadratu

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

— Martijn
źródło

1

Dzięki stary! Najprostsze odpowiedzi są zwykle najlepsze

— Merunas Grincalaitis

7

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: Znalazłem to gdzie indziej, ale nie pamiętam źródła

— user2129794
źródło

5

Ja też chciałem to zrobić. Mam duży obraz płytki (dosłownie obraz płytki), który chciałbym obrócić o około 15 stopni i powtórzyć. Możesz sobie wyobrazić rozmiar obrazu, który powtarzałby się płynnie, sprawiając, że odpowiedź „programu do edycji obrazu” byłaby bezużyteczna.

Moim rozwiązaniem było nadanie nieobróconego (tylko jednej kopii :) obrazka kafelka do pseudo: przed elementem - powiększ go - powtórz to - ustaw przepełnienie kontenera na ukryty - i obróć wygenerowany: przed elementem za pomocą transformacji css3. Brednie!

— Simon Seddon
źródło

Nie mogę „sobie wyobrazić rozmiar obrazu, który będzie powtarzać płynnie” są bardzo duże ...

— sheriffderek

1

co zrobić, jeśli chcesz, aby twój podstawowy obraz tła był pochylony?

— Jason,

4

Aktualizacja 2020, maj:

Ustawienie, position: absolutea następnie transform: rotate(45deg)zapewni tło:

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>

Rozwiń fragment

Oryginalna odpowiedź:

W moim przypadku rozmiar obrazu nie jest tak duży, że nie mogę mieć jego obróconej kopii. Tak więc obraz został obrócony za pomocą photoshop. Alternatywą photoshopdla obracania obrazów jest również narzędzie online do obracania obrazów . Po obróceniu pracuję z obiektem rotated-imagew backgroundnieruchomości.

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

Powodzenia...

— Akash
źródło

Jak obrócić obraz tła w kontenerze?

Aktualizacja 2020, maj:

Oryginalna odpowiedź: