背景画像のみを180度回転させるCSS3実装例

背景画像のみを180度回転させるCSS3実装例

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 学習ノート グリッドシステムの原則

推薦する

MySQL シリーズ 14 MySQL 高可用性実装

1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...

JavaScriptで配列を作成する方法の詳細な説明

目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...

MySQL関数の簡単な紹介

目次1. 数学関数2. 文字列関数3. 日付関数4. 暗号化機能主な MySQL 関数は次のように紹...

キャッシュサーバーを構築するためのMemcached方式

序文多くの Web アプリケーションは、リレーショナル データベース管理システム (RDBMS) に...

JavaScript で右クリック メニューを統合する layim のサンプル コード

目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...

Docker Consul コンテナ サービスの更新と見つかった問題の概要

目次1. コンテナサービスの更新とDockerコンサルの検出1. サービス登録と検出とは何ですか? ...

Javascript DOM、ノード、要素取得の紹介

目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...

Tomcatのデフォルトプログラム公開パスの使用と変更についての説明

tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...

Centos7にGitLabサーバーをインストールして展開する方法

私はここでCentOS 7 64ビットシステムを使用しています。CentOS 64ビットシステムを試...

Vueでaxiosをカプセル化する方法

目次1. インストール1. はじめに3. インターフェースルートアドレス4. 使用例4.1 ダウンロ...

MySQLはデータテーブル内の既存のテーブルを分割します

目次操作方法操作プロセス既存のテーブルにパーティション テーブルを作成し、データを新しいテーブルに移...

Mysql接続数の設定と取得方法

接続数を取得する --- 最大接続数を取得します。SHOW VARIABLES LIKE '...

MySQL での and or クエリの優先度分析

これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...

1 つの記事で Apache Avro データを解析する

概要: この記事では、Avro データをシリアル化して生成し、FlinkSQL を使用して解析する方...

CSS クリアフロートクリア:both サンプルコード

今日はフロートのクリアについてお話します。フロートのクリアについてお話する前に、フロートとは何かを理...