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

Я хочу, чтобы повернуть изображение, которое помещается в кнопку прокрутки в 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;
}

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

unor
Редактировал вопрос 14-го февраля 2015 в 12:50
Программирование
css background-image image-rotation
23-го февраля 2011 в 5:44
73 просмотров
Комментарии к вопросу (5)

Очень хорошо сделано, и ответил Здесь - 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);
}
Комментарии (5)

Очень простой способ, вы поворачиваете в одну сторону, а содержание другое. Хотя требует площади 

#element{
    background : url('someImage.jpg');
}
#element:hover{
    transform: rotate(-30deg);
}
#element:hover >*{
    transform: rotate(30deg);
}
Комментарии (1)

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

Мое решение было дать ООН-поворачивать (только один экземпляр :) изображение плитки для псевдо :перед элементом - негабаритные ему - повторить - установить контейнер переполнение скрытый и вращать автоматически :перед элементом с помощью CSS3 трансформаций. Чушь!

Комментарии (3)

Усс:

.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); }
}

Код

$(buttonElement).click(function () {
  $(".arrow").toggleClass("reverse")

  return false
})

$(buttonElement).hover(function () {
  $(".arrow").addClass("rotate")
}, function() {
  $(".arrow").removeClass("rotate")
})

ЗЫ: я'вэ нашел это где-то еще, но Дон'т помню источник

Gust van de Wal
Редактировал ответ 24-го ноября 2018 в 10:41
Комментарии (0)

В моем случае, размер изображения не столь велика, что я не могу иметь повернутую копию. Так, изображение было повернуто с "фотошоп". Альтернатива для фотошоп для вращения изображения интерактивный инструмент для вращения изображения. Когда-то поворачивается, Я'м работает с поворачивать изображение в фоне собственность.

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

Удачи...

Комментарии (0)