背景画像に CSS3 変換を適用するためのソリューション

CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場合や、コンテナ要素が回転しても背景画像を一定に保ちたい場合に適した回避策を紹介します。

CSS3 変換プロパティを使用して、任意の要素を拡大縮小、傾斜、回転します。ベンダー プレフィックスなしですべての最新ブラウザでサポートされています。 (古いブラウザをサポートしたい場合に備えて -webkit- を追加しました。)

#私の要素 {
-webkit-transform: 回転(30度);
変換: 回転(30度);
}

素晴らしいですね。ただし、これにより、要素全体（コンテンツ、境界線、背景画像）が回転します。背景画像だけを回転させたい場合はどうすればよいでしょうか?または、要素が回転しても背景を一定に保ちたい場合

現在、背景画像の遷移に関する W3C の推奨事項はありません。これは非常に便利なので、最終的には実現されると思いますが、現在同様の効果を使用したい開発者にとっては役に立ちません。

幸いなことに、解決策はあります。本質的には、これは背景画像を親コンテナーではなく、前または後の疑似要素に適用するためのハックです。疑似要素は独立して変換できます。

背景のみを変換する

コンテナ要素には任意のスタイルを適用できますが、疑似要素はその要素内に配置されるためposition:relativeに設定する必要があります。背景をコンテナーの外側にオーバーフローさせたくない場合は、overflow:hidden も設定する必要があります。

#私の要素 {
位置: 相対的;
オーバーフロー: 非表示;
}

これで、遷移背景を持つ絶対配置の疑似要素を作成できるようになりました。コンテナ コンテンツの下に表示されるように、z-index は -1 に設定されています。

#myelement:before {
コンテンツ： "";
位置: 絶対;
幅: 200%;
高さ: 200%;
上: -50%;
左: -50%;
Zインデックス: -1;
背景: url(background.png) 0 0 繰り返し;
-webkit-transform: 回転(30度);
変換: 回転(30度);
}

疑似要素の幅、高さ、位置を調整する必要がある場合があることに注意してください。たとえば、繰り返し画像を使用している場合、背景を完全に覆うには、回転領域がそのコンテナーよりも大きくなければなりません。

遷移要素の背景を修正

変換された要素の背景を修正しました。親コンテナのすべての変換が疑似要素に適用されます。したがって、その変換を元に戻す必要があります。たとえば、コンテナーが 30 度回転した場合、背景を -30 度回転させて固定位置に戻す必要があります。

#私の要素 {
位置: 相対的;
オーバーフロー: 非表示;
-webkit-transform: 回転(30度);
変換: 回転(30度);
}
#myelement:before {
コンテンツ： "";
位置: 絶対;
幅: 200%;
高さ: 200%;
上: -50%;
左: -50%;
Zインデックス: -1;
背景: url(background.png) 0 0 繰り返し;
-webkit-transform: 回転(-30度);
変換: 回転(-30度);

ここでも、背景が親コンテナーを適切にカバーするように、サイズと位置を調整する必要があります。

この効果はすべての主要なブラウザで機能し、Edge と Internet Explorer の両方でバージョン 9 に戻ります。 IE8 では遷移は表示されませんが、背景は表示されます。

要約する

上記は、私が紹介した背景画像に CSS3 変換を適用するためのソリューションです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。