160

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

コンテンツを回転させずに画像を回転させたい。

css background-image image-rotation

— プリヤ
ソース

1

これもやってみたいです。iCloudでこのようなことが起こっている例があります-ボールトテクスチャが動的に回転する様子をご覧ください：icloud.com

— Subcreation

視差のようなものです。しかし、コードからは実際には

— わかり

多分あなたはもう必要も答えもしないかもしれませんが、多分誰か他の人が興味を持つでしょう。これを行う方法を示すチュートリアルのリンクは次のとおりです。http

— //www.sitepoint.com/css3-transform-background-image/

残念ながら、提供されているすべてのソリューションはスクロールバーでは機能しません。私は4つの別々の写真を作成することになりました。

— amoebe

1

参照：CSS3で背景画像を回転させる

— 2015

141

とてもよくできていて、ここで答えました -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

参考までに、コンテナは、必要な変換を正確に取得できない場合に備えて、中心点を中心に回転します。

— Nick Larsen

fyi、それはすべての要素に対して機能するわけではありません。たとえば、はを持つselectことができません:before。

— YannDìnendal2015

1

また、すべての場合、つまり10px×200pxのような長方形の要素では、200％では十分でない場合があることに注意してください。

— Henrik Christensen

4

ええ、でもこれは背景を回転させていません。これは近似でそれを偽造しています。実際に背景を回転させる必要がある場合、これは役に立ちません。

— dev_willis 2018

22

非常に簡単な方法で、一方を回転させ、もう一方を回転させます。正方形が必要です

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

— マルティン
ソース

1

ありがとう兄貴！最も単純な答えは通常最高です

— 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：私はどこかでこれを見つけましたが、ソースを覚えていません

— user2129794
ソース

5

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

私の解決策は、回転されていない（1つのコピーのみ）タイル画像をpsuedo：before要素に与える-サイズを大きくする-それを繰り返す-コンテナーのオーバーフローを非表示に設定する-css3変換を使用して生成された：before要素を回転させるボッシュ！

— サイモン・セドン
ソース

「シームレスに繰り返される画像のサイズを想像する」ことは非常に大きなことはできません...

— シェリフデレク12/16

1

ベースの背景画像を傾けたい場合はどうしますか？

— Jason

4

2020年5月の更新：

設定するposition: absoluteとtransform: rotate(45deg)、背景が提供されます：

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>

スニペットを展開

元の回答：

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

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

幸運を...

— アカシュ
ソース

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

2020年5月の更新：

元の回答：