コンテンツに影響を与えずにコンテナ内の背景画像を回転するにはどうすればよいですか?

コンテナ内の背景画像の回転

この質問では、ユーザーは 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;
}

目的の回転を実現するには内容に影響を与えることなく、2 段階のアプローチを提案します。まず、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);
}

これにより、コンテナ全体に広がり、目的の角度で回転する透明な疑似要素が作成されます。次に、コンテナのコンテンツが、この回転された擬似要素の上に配置されます。

参照リソースで提案されているように、この手法により、コンテンツを歪めることなく背景画像を回転できます。

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