160

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 rotar su contenido.

css background-image image-rotation

— priya
fuente

1

Me gustaría hacer esto también. Hay un ejemplo de algo como esto suceda en iCloud - ver cómo gira la bóveda de textura dinámica: icloud.com

— subcreación

eso se parece un poco a una cosa de paralaje. aunque realmente no podía distinguir el código ...

— sheriffderek

Supongo que tal vez ya no necesites y respondas, pero tal vez alguien más esté interesado. Aquí hay un enlace para un tutorial que muestra cómo hacerlo: http://www.sitepoint.com/css3-transform-background-image/

— Ayoub M.

Lamentablemente, todas las soluciones proporcionadas no funcionan en las barras de desplazamiento. Terminé creando 4 imágenes separadas.

— amoebe

1

Consulte también: Rotación de una imagen de fondo con CSS3

— hasta

141

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

— Anmol Saraf
fuente

2

Para su información, los contenedores rotan sobre su punto central, en caso de que tenga problemas para obtener exactamente la transformación que desea.

— Nick Larsen

para tu información, no funciona para todos los elementos; por ejemplo, a selectno puede tener a :before.

— Yann Dìnendal

1

Además, tenga en cuenta que el 200% puede no ser suficiente en todos los casos, es decir, en elementos oblongos como 10px × 200px.

— Henrik Christensen

44

Sí, pero esto no está girando el fondo. Esto lo está fingiendo con una aproximación. Si realmente necesita girar el fondo, esto no ayudará.

— dev_willis

22

Método muy fácil, rotas en un sentido y los contenidos en el otro. Aunque requiere un cuadrado

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

— Martijn
fuente

1

¡Gracias hermano! Las respuestas más simples suelen ser las mejores

— Merunas Grincalaitis

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")
})

PD: he encontrado esto en otro lugar pero no recuerdo la fuente

— usuario2129794
fuente

5

Estaba buscando hacer esto también. Tengo una imagen de mosaico grande (literalmente una imagen de mosaico) que me gustaría rotar solo unos 15 grados y he repetido. Puede imaginar el tamaño de una imagen que se repetiría sin problemas, haciendo que la respuesta del 'programa de edición de imágenes' sea inútil.

Mi solución fue dar la imagen de mosaico sin rotar (solo una copia :) a psuedo: before element - oversize it - repetirlo - establecer el contenedor de desbordamiento en hidden - y rotar el generado: before element usando css3 transforma. ¡Tonterías!

— Simon Seddon
fuente

No puedo "imaginar el tamaño de una imagen que se repetiría a la perfección" siendo muy grande ...

— sheriffderek

1

¿Qué pasa si desea que su imagen de fondo base se incline?

— Jason

4

Actualización 2020, mayo:

Configuración position: absolutey luego transform: rotate(45deg)proporcionará un fondo:

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>

Expandir fragmento

Respuesta original

En mi caso, el tamaño de la imagen no es tan grande que no puedo tener una copia rotada. Entonces, la imagen ha sido rotada con photoshop. Una alternativa a las photoshopimágenes giratorias es la herramienta en línea también para imágenes giratorias . Una vez girado, estoy trabajando con el rotated-imageen la backgroundpropiedad.

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

Buena suerte...

— Akash
fuente

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

Actualización 2020, mayo:

Respuesta original