Como girar a imagem de fundo no contêiner?


160

Eu quero girar a imagem que é colocada no botão da barra de rolagem no Chrome. Agora eu tenho um CSS com este conteúdo:

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

Desejo rodar a imagem sem rodar o seu conteúdo.


1
Eu gostaria de fazer isso também. Há um exemplo de algo como isso aconteça no iCloud - ver como as gira abóbada textura dinamicamente: icloud.com
subcriação

isso parece uma coisa de paralaxe. realmente não podia dizer a partir do código ...
sheriffderek

Eu acho que talvez você não precise mais responder, mas talvez alguém esteja interessado. Aqui está um link para um tutorial que mostra como fazê-lo: http://www.sitepoint.com/css3-transform-background-image/
Ayoub M.

Infelizmente, todas as soluções fornecidas não funcionam nas barras de rolagem. Acabei criando 4 fotos separadas.
Amebe 5/02

Respostas:


141

Muito bem feito e respondido aqui - 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
Para sua informação, os contêineres giram em torno do ponto central, caso você esteja tendo problemas para obter exatamente a transformação que deseja.
Nick Larsen

fyi, não funciona para todos os elementos; por exemplo, um selectnão pode ter um :before.
Yann Dìnendal

1
Além disso, observe que 200% pode não ser suficiente em todos os casos, ou seja, em elementos retangulares como 10px × 200px.
Henrik Christensen

4
Sim, mas isso não está girando o plano de fundo. Isso está fingindo com uma aproximação. Se você realmente precisar girar o plano de fundo, isso não ajudará.
dev_willis

22

Método muito fácil, você gira para um lado e o conteúdo para o outro. Requer um quadrado

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

1
Obrigado mano! As respostas mais simples são geralmente a melhor
Merūnas 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")
})

PS: Eu encontrei isso em outro lugar, mas não me lembro da fonte


5

Eu estava olhando para fazer isso também. Eu tenho uma imagem grande de bloco (literalmente uma imagem de um bloco) que gostaria de girar cerca de 15 graus e repeti. Você pode imaginar o tamanho de uma imagem que se repetiria perfeitamente, tornando inútil a resposta do 'programa de edição de imagens'.

Minha solução foi atribuir a imagem não rotacionada (apenas uma cópia :) ao psuedo: elemento anterior - sobredimensionar - repetir - definir o estouro do contêiner como oculto - e girar o elemento gerado: antes usando transformações css3. Bosh!


i não pode "imaginar o tamanho de uma imagem que iria repetir perfeitamente" ser muito grande ...
sheriffderek

1
e se você quiser que sua imagem de fundo base seja inclinada?
Jason

4

Atualização 2020, maio:

Definir position: absolutee, em seguida transform: rotate(45deg), fornecerá um plano de fundo:

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>

Resposta original:

No meu caso, o tamanho da imagem não é tão grande que não possa ter uma cópia rotacionada. Então, a imagem foi girada com photoshop. Uma alternativa photoshoppara girar imagens é a ferramenta on - line também para girar imagens . Uma vez rotacionado, estou trabalhando com o rotated-imagena backgroundpropriedade.

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

Boa sorte...

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.