ボタン自体を回転させずに、CSS スクロールバー ボタン内の画像を回転するにはどうすればよいですか?

CSS スクロールバーでの背景画像の回転: 回転の謎が解決されました

質問:

Chrome のスクロールバー ボタン内で画像を回転しようとしたとき、開発者は課題に遭遇しました。 -webkit-transform プロパティはコンテンツを含むボタン全体を正常に回転させますが、画像のみを回転させる解決策を模索しました。

答え:

解決策はあります。疑似要素 :before を利用して、元の要素内に追加の要素を作成します。擬似要素を絶対的に配置し、その寸法を定義し、親要素に対して相対的に配置することで、別の「レイヤー」になります。

CSS コード スニペット:

#myelement:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    transform: rotate(30deg);
}

この例ではスニペットでは、背景画像が擬似要素内に設定され、transform プロパティを使用して回転されます。 z-index により、画像レイヤーがメイン要素のコンテンツの背後に留まることが保証されます。 top プロパティと left プロパティを調整することで、画像を要素内に配置して、希望の中心を中心に回転させることができます。

以上がボタン自体を回転させずに、CSS スクロールバー ボタン内の画像を回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。