Como girar a imagem de fundo no recipiente?

Question

Mais

Fonte Versão sem AMP Editar

Como girar a imagem de fundo no recipiente?

Eu quero rodar a imagem que é colocada no botão da barra de rolagem em Cromo. 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.

unor

Pergunta editada :em

Programação

css background-image image-rotation

23º fevereiro 2011 в 5:44

22 vistas

Anmol Saraf · Answer 1 · 2013-03-06T15:20:43+00:00

Muito bem feito e respondido aqui - http://www.sitepoint.com/css3-transform-background-image/ [2]

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

Simon Seddon · Answer 2 · 2012-05-23T09:21:42+00:00

Eu também queria fazer isto. Eu tenho uma grande telha (literalmente uma imagem de uma telha) imagem que I'gostaria de rodar por apenas cerca de 15 graus e ter repetido. Você pode imaginar o tamanho de uma imagem que se repetiria na perfeição, tornando o 'programa de edição de imagem' responda inútil.

Minha solução foi dar a imagem não roteirizada (apenas uma cópia :) para psuedo :antes do elemento - superdimensioná-lo - repeti-lo - definir o transbordamento do recipiente para oculto - e girar o gerado :antes do elemento usando css3 transforma. Bosh!

user2129794 · Answer 3 · 2013-04-30T19:51:00+00:00

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: I'encontrei isto em outro lugar mas não'não me lembro da fonte