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

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

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

Ответы

Ответ 1

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

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

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

Ответ 3

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

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

Ответ 4

CSS

.reverse {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
} 
.rotate {
    -webkit-animation-duration:.5s;
    -moz-animation-duration:.5s;
    -webkit-animation-iteration-count:1;
    -moz-animation-iteration-count:1;
    -webkit-animation-name: yoyo;
    -moz-animation-name: yoyo;
    -webkit-animation-timing-function:linear;
    -moz-animation-timing-function:linear;
}

@-webkit-keyframes yoyo { 
    from {-webkit-transform:scale(1) rotate(0deg);}
    to {-webkit-transform:scale(1) rotate(360deg);} 
}


@-moz-keyframes yoyo { 
    from {-moz-transform:scale(1) rotate(0deg);}
    to {-moz-transform:scale(1) rotate(360deg);} 
}

JavaScript:

$(buttonElement).click(function()
                       {
                         $('head').hide();

                        $(".arrow").toggleClass("reverse");
                            $(".tsp_panel").toggle("slow");
                            $(this).toggleClass("active");

                            return false;
                        });  
                        //-------------------
                      $(buttonElement).hover(function(){
                        $(".arrow").addClass("rotate");
                        $(".arrow").stop().animate({top: '400px'}, {duration:1000, easing: 'easeOutBack'});

                      }, function() {
                        $(".arrow").removeClass("rotate");
                        $(".arrow").stop().animate({top: "47px"}, {duration:600, easing: 'easeInOutExpo'} );
                    });

PS: Я использовал это, но не помню источник