Aku ingin memutar gambar yang ditempatkan di tombol scrollbar di Chrome. Sekarang aku 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 berharap untuk memutar gambar tanpa berputar isinya.
Sangat baik dilakukan 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);
}
Sangat mudah metode ini, anda dapat memutar salah satu cara, dan isi lainnya. Membutuhkan square meskipun
#element{
background : url('someImage.jpg');
}
#element:hover{
transform: rotate(-30deg);
}
#element:hover >*{
transform: rotate(30deg);
}
Saya sedang mencari untuk melakukan hal ini juga. Saya memiliki ubin besar (secara harfiah gambar tile) gambar yang saya'd seperti untuk memutar dengan hanya kira-kira 15 derajat dan harus diulang. Anda bisa membayangkan ukuran dari gambar yang akan ulangi mulus, rendering 'program editing gambar' jawaban yang tidak berguna.
Solusi saya adalah memberikan un-diputar (hanya satu copy :) ubin gambar untuk psuedo :sebelum elemen - kebesaran itu - ulangi - set wadah meluap ke tersembunyi - dan memutar dihasilkan :sebelum elemen menggunakan css3 transformasi. Bosh!
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've menemukan ini di tempat lain tapi don't mengingat sumber
Dalam kasus saya, ukuran gambar tidak begitu besar bahwa saya tidak bisa memiliki diputar copy dari itu. Jadi, gambar yang telah diputar dengan photoshop
. Alternatif untuk photoshop
untuk memutar gambar online alat juga untuk memutar gambar. Setelah diputar, aku'm bekerja dengan diputar-gambar
di latar belakang
properti.
div.with-background {
background-image: url(/img/rotated-image.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
}
Good Luck...