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

背景画像に 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 変換を適用するためのソリューションです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。

<<:  dockerでifconfigが利用できない問題を解決する

>>:  MySQLの7種類のログの概要

推薦する

MySQL クロステーブルクエリとクロステーブル更新

SQL の基礎知識がある友人は、「クロステーブル クエリ」について聞いたことがあるはずですが、クロス...

CSS の一部のプロパティの前には「*」または「_」が付きます。

CSS の一部のプロパティの前には「*」または「_」が付きます。さまざまなブラウザを識別する例えば...

MySQL インデックス プッシュダウン (ICP) の簡単な理解と例

序文Index Condition Pushdown (ICP) は、MySQL 5.6 の新機能で...

JConsoler を使って Tomcat の JVM メモリを監視する方法を説明します

目次1. Tomcatを監視する方法2. Java独自の監視コマンド3. Tomcatのトラブルシュ...

JavaScript の高度なクロージャの説明

目次1. 閉鎖の概念追加の知識ポイント: 2. 閉鎖の役割: 3. 閉鎖例3.1 liをクリックする...

CSS を使用して要素のスクロールバーを非表示にするサンプルコード

どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか...

Linux 環境での Oracle 導入チュートリアル

1. 環境と関連ソフトウェア仮想マシン: VMwore Workstation Linuxシステム:...

MySQL 起動時に「サーバーは PID ファイルを更新せずに終了しました」というエラーが報告される理由の詳細な分析

多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...

CSSは高度に適応したフルスクリーンを実現します

独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...

データベースインデックスの知識ポイントの概要

目次ファーストルックインデックスインデックスの概念インデックスファイルの構成インデックスの役割SQL...

Mysql の主キーと一意キーの違いのまとめ

主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...

ゲーム着物メモ問題の簡単な分析

本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...

JavaScript/TypeScript で同時リクエスト制御を実装するためのサンプルコード

シナリオリクエストが 10 件あるが、同時リクエストの最大数は 5 件で、リクエスト結果が必要である...

jQueryはドロップダウンメニューのスライド効果を実現します

Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...

Docker を使用して Microsoft Sql Server を展開するための詳細な手順

目次1 背景2 コンテナを作成する3 SAパスワードを変更する4 mssql のリンク5. コンテナ...