Bagaimana cara memutar gambar latar belakang dalam wadah?

160

Saya ingin memutar gambar yang ditempatkan di tombol scrollbar di Chrome. Sekarang saya punya CSS dengan konten ini:

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

Saya ingin memutar gambar tanpa memutar kontennya.

css background-image image-rotation priya
sumber
1
Saya juga ingin melakukan ini. Ada contoh hal seperti ini terjadi di iCloud - lihat bagaimana tekstur vault berputar secara dinamis: icloud.com
Subcreation
yang terlihat seperti hal paralaks. tidak bisa benar-benar tahu dari kode ...
sheriffderek
Saya kira mungkin Anda tidak lagi membutuhkan dan menjawab tetapi mungkin orang lain akan tertarik. Berikut ini tautan untuk tutorial yang menunjukkan cara melakukannya: http://www.sitepoint.com/css3-transform-background-image/
Ayoub M.
Sayangnya semua solusi yang disediakan tidak berfungsi di scroll bar. Saya akhirnya membuat 4 gambar terpisah.
amoebe
1
Lihat juga: Memutar gambar latar belakang dengan CSS3
unor

Jawaban:

141

Dilakukan dengan sangat baik dan dijawab di sini - 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
sumber
2
FYI, kontainer berputar di sekitar titik pusatnya, jika Anda mengalami kesulitan untuk mendapatkan transformasi yang Anda inginkan.
Nick Larsen
fyi, itu tidak bekerja untuk semua elemen; misalnya, a selecttidak dapat memiliki :before.
Yann Dìnendal
1
Juga, berhati-hatilah bahwa 200% mungkin tidak cukup dalam semua kasus, yaitu pada elemen lonjong seperti 10px × 200px.
Henrik Christensen
4
Ya, tapi ini bukan memutar latar. Ini memalsukannya dengan perkiraan. Jika Anda benar-benar membutuhkan latar belakang untuk diputar, ini tidak akan membantu.
dev_willis
22

Metode yang sangat mudah, Anda memutar satu arah, dan isinya yang lain. Membutuhkan kotak

#element{
    background : url('someImage.jpg');
}
#element:hover{
    transform: rotate(-30deg);
}
#element:hover >*{
    transform: rotate(30deg);
}
Martijn
sumber
1
Terima kasih kawan! Jawaban yang paling sederhana biasanya yang terbaik
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")
})

PS: Saya menemukan ini di tempat lain tetapi tidak ingat sumbernya

pengguna2129794
sumber
5

Saya juga ingin melakukan ini. Saya memiliki ubin besar (secara harfiah gambar ubin) yang ingin saya putar kira-kira 15 derajat dan telah berulang. Anda dapat membayangkan ukuran gambar yang akan diulang dengan mulus, menjadikan jawaban 'program pengeditan gambar' tidak berguna.

Solusi saya adalah memberikan ubin gambar un-rotated (hanya satu salin :) ke psuedo: sebelum elemen - besarkan - ulangi - atur overflow wadah untuk disembunyikan - dan putar yang dihasilkan: sebelum elemen menggunakan transformasi css3. Omong kosong!

Simon Seddon
sumber
saya tidak bisa "membayangkan ukuran gambar yang akan diulang mulus" menjadi sangat besar ...
sheriffderek
1
bagaimana jika Anda ingin gambar latar belakang dasar Anda dimiringkan?
Jason
4

Pembaruan 2020, Mei:

Pengaturan position: absolutedan kemudian transform: rotate(45deg)akan memberikan latar belakang:

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>
Luaskan cuplikan

Jawaban asli:

Dalam kasus saya, ukuran gambar tidak terlalu besar sehingga saya tidak dapat memiliki salinannya yang diputar. Jadi, gambar sudah diputar dengan photoshop. Alternatif photoshopuntuk memutar gambar adalah alat online juga untuk memutar gambar . Setelah diputar, saya bekerja dengan rotated-imagedi backgroundproperti.

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

Semoga berhasil...

Akash
sumber