1. 心の旅最近コックピットを書いていたときに、背景画像を単純に特定の角度に回転させるという問題について考えました。 CSS3 の変換を使用してコンテナー全体を特定の角度に反転するだけでは、必要な効果は得られません。 その後、関連記事を調べて参照することで、ようやくこの効果を実現できました。さっそく、コードを公開します。 2. コードの実装HTMLテンプレートは以下のとおりです <div class="smart_development_right"> <div class="smart_development_content"> <span>インテリジェント センシング デバイス</span> </div> <div class="smart_development_content"> <span>オンライン料金</span> </div> </div> CSSコード .smart_development_right{ 位置: 相対的; オーバーフロー: 非表示; } .wisdomGongdi .gongdi_center .center_top .smart_development_right::before { コンテンツ: ""; 位置: 絶対; 幅: 100%; 高さ: 100%; 上: 0; 左: 0; Zインデックス: -1; 背景: url('/public/smart_equipment.png') 0 0 繰り返しなし; 変換: 回転(180度); } 右に90度回転したい場合は、上記のコードの180degを90degに変更します。 左に90度回転したい場合は、上記のコードの180degを-90degに変更します。 アイデアが正しければ、実装は非常に簡単になります。 結局使わなかったのですが、とても便利だと思ったので皆さんにもシェアしたいと思います。 参考文献 以上で、CSS3で背景画像のみを180度回転させる実装例についての記事は終了です。CSS3で背景画像を180度回転させる方法についての詳細は、123WORDPRESS.COMの過去記事を検索するか、引き続き下記の関連記事をご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 |
<<: HTMLファイルとは何ですか?HTMLファイルを開く方法
>>: Bootstrap 3.0 学習ノート グリッドシステムの原則
Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...
目次序文導入1. 作用機序2. 自然から3. 時計と計算の比較4. メソッドはデータロジックの関係を...
序文:私はずっと、SQL 文がどのように、どのような順序で実行されるのかを知りたいと思っていました。...
目次1. マージインターフェース1.1 非関数メンバー1.2 関数メンバー序文:今日お話ししたいのは...
背景ご存知のとおり、nginx は高性能な Web サーバーであり、負荷分散やリバース プロキシによ...
この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...
目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...
Web ページでは、基本的に <input type="file">...
この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...
序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...
ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...
Macノードの削除と再インストール消去 ノード -v sudo npm アンインストール npm -...
目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...
デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...
最新のソリューション: -v /usr/share/zoneinfo/Asia/Shanghai:/...