コンテンツを回転させずに CSS で背景画像を回転するにはどうすればよいですか?

コンテンツに影響を与えずにコンテナ内で背景画像を回転する

Web サイトのコンポーネントのスタイルを設定する場合、一般的な要素の 1 つはスクロールバーです。より視覚的に魅力的なデザインを実現するには、スクロールバー要素をカスタマイズすることができます。ただし、スクロールバーで背景画像を回転すると、常に期待どおりに動作するとは限りません。

Chrome では、背景画像を回転すると、その中のコンテンツも回転する場合があります。コンテンツを回転させずに画像を回転したい場合は、次のような解決策が考えられます。

この問題に対する効果的な解決策は、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;
    transform: rotate(30deg);
}

このコードは、:before セレクターを使用して疑似要素を作成します。親要素のサイズの 2 倍の寸法を持つ透明なボックスを絶対に配置し、親要素内の中央に配置します。次に、背景画像がこの疑似要素に適用され、実際のコンテンツとは独立して回転するようになります。

以上がコンテンツを回転させずに CSS で背景画像を回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。