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.


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

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

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

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


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!


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>

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...

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.