Как повернуть фоновое изображение в контейнере? - PullRequest
Новая
       39

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

132 голосов
/ 23 февраля 2011

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

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

Ответы [ 5 ]

127 голосов
/ 06 марта 2013

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

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

#element{
    background : url('someImage.jpg');
}
#element:hover{
    transform: rotate(-30deg);
}
#element:hover >*{
    transform: rotate(30deg);
}
5 голосов
/ 23 мая 2012

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

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

4 голосов
/ 30 апреля 2013

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

2 голосов
/ 24 декабря 2018

В моем случае размер изображения не такой большой, что у меня не может быть его повернутой копии.Итак, изображение было повернуто с 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;
}

Удачи ...

...