Konteynerdeki arka plan görüntüsü nasıl döndürülür?

Question

Daha

Kaynak Non AMP-version Düzenle

Konteynerdeki arka plan görüntüsü nasıl döndürülür?

Chrome'da kaydırma çubuğunun düğmesine yerleştirilen resmi döndürmek istiyorum. Şimdi bu içeriğe sahip bir CSS'im var:

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

Görüntüyü içeriğini döndürmeden döndürmek istiyorum.

unor

Edited question 2015ööp50öö24 Şubat 2015 в 12:50

Programlama

css background-image image-rotation

2011ööp44öö5 Şubat 2011 в 5:44

25 görünümler

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

Çok iyi yapılmış ve burada cevaplanmış - 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);
}

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

Ben de bunu yapmak istiyordum. Yaklaşık 15 derece döndürmek ve tekrarlamak istediğim büyük bir karo (kelimenin tam anlamıyla bir karo görüntüsü) görüntüm var. Sorunsuz bir şekilde tekrarlanacak ve 'resim düzenleme programı' cevabını işe yaramaz hale getirecek bir görüntünün boyutunu hayal edebilirsiniz.

Çözümüm, döndürülmemiş (sadece bir kopya :) karo görüntüsünü psuedo :before öğesine vermek - büyük boyutlandırmak - tekrarlamak - kapsayıcı taşmasını gizli olarak ayarlamak - ve oluşturulan :before öğesini css3 dönüşümlerini kullanarak döndürmekti. 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: Bunu başka bir yerde buldum ama kaynağını hatırlamıyorum