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 学習ノート グリッドシステムの原則
この記事では、Docker+Jenkins の自動ビルドデプロイメントを紹介し、皆さんと共有します。...
フレキシブル レイアウト (Flexbox) はますます人気が高まっており、CSS レイアウトの記述...
序文配列は特別な種類のオブジェクトです。 js には実際の配列はなく、オブジェクトを使用して配列をシ...
MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...
序文最近、私はある要件に遭遇しました。会社の業務上、2 つのデータベース間の一部のテーブルは、リアル...
grubの起動時間を変更するためのオンライン検索は基本的に/etc/default/grubを変更す...
<br />統計によると、Web ページの平均サイズは 2003 年以降 3 倍に増加し...
1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...
Windows に mysql5.7.18zip バージョンをインストールするには、使用前に解凍し...
目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...
<br />原文: http://jorux.com/archives/what-is-...
Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...
MACでMySQLの初期パスワードを忘れた場合の解決策を参考までに共有します。具体的な内容は次のとお...
JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...
序文MySQL の InnoDB エンジンがインデックスの保存に B+tree を使用する理由は、デ...