Chrome'daki kaydırma çubuğu düğmesine yerleştirilen resmi döndürmek istiyorum. Şimdi bu içeriğe sahip bir CSS 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.

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

Çok kolay bir yöntem, bir şekilde, diğerini ise döndürürsünüz. Yine de bir kare gerektirir

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

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

Not: Bunu başka bir yerde buldum ama kaynağını hatırlamıyorum

Bunu da yapmak istiyordum. Ben sadece yaklaşık 15 derece döndürmek ve tekrarlamak istiyorum büyük bir kiremit (kelimenin tam anlamıyla bir kiremit bir görüntü) var. Sorunsuz bir şekilde tekrarlanacak bir görüntünün boyutunu hayal ederek 'görüntü düzenleme programı' yanıtını işe yaramaz hale getirebilirsiniz.

Benim çözümüm döndürülmemiş (sadece bir kopya :) döşeme görüntüsünü psuedo'ya vermekti: öğeden önce - büyük boy - tekrarlayın - konteyner taşmasını gizli olarak ayarlayın - ve üretilen: döndürmeden önce css3 dönüşümlerini kullanarak öğeyi döndürün. Bosh!

2020 Güncellemesi, Mayıs:

Ayarlama position: absoluteve ardından transform: rotate(45deg)bir arka plan sağlayacaktır:

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>

Orijinal Yanıt:

Benim durumumda, görüntü boyutu o kadar büyük değil, döndürülmüş bir kopyasını alamıyorum. Böylece, görüntü döndürüldü photoshop. photoshopDönen görüntüler için bir alternatif, dönen görüntüler için de çevrimiçi araçtır . Döndürülmüş keresinde ile çalışıyorum rotated-imageiçinde backgroundmülk.

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

İyi şanslar...