oscurecer - opacidad imagen de fondo css

¿Cómo rotar la imagen de fondo en el contenedor?

Question

Quiero rotar la imagen que se coloca en el botón de la barra de desplazamiento en Chrome. Ahora tengo un CSS con este contenido:

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

Deseo rotar la imagen sin girar su contenido.

Answer 1

Método muy fácil, gira en una dirección y los contenidos en la otra. Requiere un cuadrado aunque

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

Answer 2

Muy bien hecho y respondido aquí - 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);
}

Answer 3

Yo estaba buscando hacer esto también. Tengo una imagen de mosaico grande (literalmente una imagen de un mosaico) que me gustaría rotar con apenas 15 grados y repetir. Puede imaginarse el tamaño de una imagen que se repetirá a la perfección, haciendo que el "programa de edición de imágenes" responda inútilmente.

Mi solución fue darle la imagen del mosaico sin rotar (solo una copia :) a psuedo: antes del elemento - sobredimensionarlo - repetirlo - configurar el desbordamiento del contenedor a oculto - y rotar el elemento generado: antes usando transformaciones css3. ¡Tonterías!

Answer 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''} );
                    }); 

PD: lo he usado pero no recuerdo la fuente