Chromeのスクロールバーのボタンに配置されている画像を回転させたい。このような内容のCSSがあります:
::-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;
}
コンテンツを回転させずに画像を回転させたい。
非常によくできた回答がここにある。 [http://www.sitepoint.com/css3-transform-background-image/][1]
#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);
}
私もこれをやりたいと思っていました。私は大きなタイル(文字通りタイルの画像)の画像を持っていて、それを15度だけ回転させて繰り返したいのです。シームレスに繰り返される画像のサイズは想像がつくだろう。
私の解決策は、回転していない(1枚だけコピーした)タイル画像をpsuedo :before要素に与え、それをオーバーサイズし、それを繰り返し、コンテナのオーバーフローをhiddenに設定し、生成された:before要素をcss3のtransformsを使って回転させることだった。ボッシュ!
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")
})
*追記: これは別の場所で見つけたのですが、出典を覚えていません。
私の場合、画像サイズは大きくないので、回転コピーはできません。 そのため、画像は「フォトショップ」で回転しています。 画像を回転させるための「フォトショップ」の代替は、画像を回転させるためのオンラインツールです。 回転したら、「背景」プロパティの「回転画像」を使用します。
div.with-background {
background-image: url(/img/rotated-image.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
}
幸運を。..