160

Я хочу повернуть изображение, которое находится на кнопке полосы прокрутки в Chrome. Теперь у меня есть CSS с этим содержанием:

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

Я хочу вращать изображение, не поворачивая его содержимое.

css background-image image-rotation прийа
источник

1

Я бы тоже хотел это сделать. Вот пример того, как это происходит в iCloud - посмотрите, как текстура хранилища динамически вращается: icloud.com

Subcreation

это выглядит как параллакс хотя на самом деле не могу сказать из кода ...

Шерифдерек

Я думаю, что, возможно, вам больше не нужно и отвечать, но, возможно, кому-то еще будет интересно. Вот ссылка на учебник, который показывает, как это сделать: http://www.sitepoint.com/css3-transform-background-image/

Ayoub M.

К сожалению, все представленные решения не работают в полосах прокрутки. В итоге я создал 4 отдельные картинки.

Amoebe

1

Смотрите также: Поворот фонового изображения с CSS3

ОООНР

141

Очень хорошо сделано и ответили здесь - 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);
}

Анмол Сараф
источник

2

К вашему сведению, контейнеры вращаются вокруг своей центральной точки, если у вас возникли проблемы с получением именно той трансформации, которую вы хотите.

Ник Ларсен

Кстати, это не работает для всех элементов; например, selectне может иметь :before.

Янн Динендал

1

Кроме того, помните, что 200% может быть недостаточно во всех случаях, то есть на продолговатых элементах, таких как 10 × 200 пикселей.

Хенрик Кристенсен

4

Да, но это не вращение фона. Это притворяется с приближением. Если вам действительно нужно повернуть фон, это не поможет.

dev_willis

22

Очень простой способ, вы вращаете в одну сторону, а содержимое - в другую. Требуется квадрат хотя

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

Мартейн
источник

1

Спасибо брат! Самые простые ответы, как правило, самые лучшие

Мерунас Гринкалайтис

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: я нашел это где-то еще, но не помню источник

user2129794
источник

5

Я тоже хотел это сделать. У меня есть большое изображение плитки (буквально изображение плитки), которое я хотел бы повернуть примерно на 15 градусов и повторить. Вы можете вообразить размер изображения, которое будет повторяться без проблем, делая ответ «программа редактирования изображений» бесполезным.

Мое решение состояло в том, чтобы дать psuedo: before элементу - увеличить его размер - повторить его - установить переполнение контейнера на скрытый - и повернуть сгенерированный: before элемент с использованием преобразований css3. Чушь!

Саймон Седдон
источник

я не могу «представить себе размер изображения, которое будет плавно повторяться», будучи очень большим ...

sheriffderek

1

Что если вы хотите, чтобы ваше базовое фоновое изображение было наклонено?

Джейсон

4

Обновление 2020, май:

Установка, position: absoluteа затем transform: rotate(45deg)предоставит фон:

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>

Развернуть фрагмент

Оригинальный ответ:

В моем случае размер изображения не такой большой, что у меня не может быть его повернутой копии. Итак, изображение было повернуто с помощью photoshop. Альтернативой photoshopдля поворота изображений является онлайн-инструмент для поворота изображений . После поворота я работаю rotated-imageв backgroundсобственности.

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

Удачи...

Акаша
источник

Как повернуть фоновое изображение в контейнере?

Ответы:

Обновление 2020, май:

Оригинальный ответ: