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 学習ノート グリッドシステムの原則
1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...
目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...
目次1. 数学関数2. 文字列関数3. 日付関数4. 暗号化機能主な MySQL 関数は次のように紹...
序文多くの Web アプリケーションは、リレーショナル データベース管理システム (RDBMS) に...
目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...
目次1. コンテナサービスの更新とDockerコンサルの検出1. サービス登録と検出とは何ですか? ...
目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...
tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...
私はここでCentOS 7 64ビットシステムを使用しています。CentOS 64ビットシステムを試...
目次1. インストール1. はじめに3. インターフェースルートアドレス4. 使用例4.1 ダウンロ...
目次操作方法操作プロセス既存のテーブルにパーティション テーブルを作成し、データを新しいテーブルに移...
接続数を取得する --- 最大接続数を取得します。SHOW VARIABLES LIKE '...
これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...
概要: この記事では、Avro データをシリアル化して生成し、FlinkSQL を使用して解析する方...
今日はフロートのクリアについてお話します。フロートのクリアについてお話する前に、フロートとは何かを理...