web-dev-qa-db-ja.com

コンテナ内の背景画像を回転させる方法は？

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

内容を回転させずに画像を回転させたいのですが。

cssbackground-imageimage-rotation
131
priya

とてもよくできて、ここで答えました - http://www.sitepoint.com/css3-transform-b​​ackground-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);
}
125
Anmol Saraf

非常に簡単な方法は、あなたは一方向に回転し、内容は他の方向に。しかし正方形が必要

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

私もこれをやろうと思っていました。私は大体15度だけ回転させたいと思う大きいタイル（文字通りタイルのイメージ）イメージを持っていて、そして繰り返しました。あなたはシームレスに繰り返す画像のサイズを想像することができます、「画像編集プログラム」答えを役に立たなくします。

私の解決策は、回転させていない（たった1コピーの）タイル画像をpsuedo：before要素に渡し、大きめにし、繰り返し、コンテナオーバーフローをhiddenに設定し、css3変換を使ってgenerated：before要素を回転させることでした。ボッシュ！

5
Simon Seddon

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

シモンズ：私はこれをどこか別の場所で見つけましたが、ソースを覚えていません

4
user2129794

私の場合、画像サイズはそれほど大きくはないので、回転してコピーすることはできません。そのため、画像はphotoshopで回転されています。画像を回転させるためのphotoshopの代わりに 画像を回転させるためのオンラインツールもあります です。回転したら、backgroundプロパティのrotated-imageを操作します。

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

がんばろう...

2
Akash