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.
Odpowiedzi:
Bardzo dobrze zrobione i udzielono odpowiedzi tutaj - http://www.sitepoint.com/css3-transform-background-image/
źródło
select
nie może mieć:before
.Bardzo prosta metoda, obracasz w jedną stronę, a zawartość w drugą. Wymaga jednak kwadratu
źródło
CSS:
JavaScript:
PS: Znalazłem to gdzie indziej, ale nie pamiętam źródła
źródło
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!
źródło
Aktualizacja 2020, maj:
Ustawienie,
position: absolute
a następnietransform: rotate(45deg)
zapewni tło: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ąphotoshop
dla obracania obrazów jest również narzędzie online do obracania obrazów . Po obróceniu pracuję z obiektemrotated-image
wbackground
nieruchomości.Powodzenia...
źródło