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

推薦する

Docker+Jenkinsを使用して自動的にビルドおよびデプロイする

この記事では、Docker+Jenkins の自動ビルドデプロイメントを紹介し、皆さんと共有します。...

Flexboxレイアウトの最もシンプルなフォーム実装

フレキシブル レイアウト (Flexbox) はますます人気が高まっており、CSS レイアウトの記述...

js配列の基本的な使い方のまとめ

序文配列は特別な種類のオブジェクトです。 js には実際の配列はなく、オブジェクトを使用して配列をシ...

MySQL 5.7.18 無料インストールバージョンの設定チュートリアル

MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...

MySQL 5.7 における部分テーブルのデュアルマスター同期の実装プロセスの詳細な説明

序文最近、私はある要件に遭遇しました。会社の業務上、2 つのデータベース間の一部のテーブルは、リアル...

UbuntuでGRUBの起動時間を変更する

grubの起動時間を変更するためのオンライン検索は基本的に/etc/default/grubを変更す...

ウェブページサイズに関する調査

<br />統計によると、Web ページの平均サイズは 2003 年以降 3 倍に増加し...

Windows 10 システムで Mysql8.0.13 のルート パスワードを忘れる方法

1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...

MySQL 5.7.18 zip バージョンのインストールと設定方法のグラフィック チュートリアル (win7)

Windows に mysql5.7.18zip バージョンをインストールするには、使用前に解凍し...

この記事では、MySQLのマスタースレーブ同期の原理を説明します。

目次MySQL マスタースレーブ同期原理の簡単な分析1. マスタースレーブとは何ですか? 2. 主従...

du コマンドを使用して Linux システム ディレクトリのサイズを取得する方法

Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...

MAC 上の MySQL の初期パスワードを忘れた場合の対処方法

MACでMySQLの初期パスワードを忘れた場合の解決策を参考までに共有します。具体的な内容は次のとお...

JavaScript で二分探索木を実装する

JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...

MySQL innodb B+ツリーの高さを取得する方法

序文MySQL の InnoDB エンジンがインデックスの保存に B+tree を使用する理由は、デ...