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

推薦する

超大型フォントを使用した 40 の Web ページ デザイン

今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...

さまざまな Tomcat ログと catalina.out ファイルのセグメンテーションの関係についての簡単な分析

Tomcatログの関係一枚の写真は千の言葉に値する! localhost.{yyyy-MM-dd}....

反応ルーティングでパラメータを渡すいくつかの方法についての簡単な説明

最初のパラメータ渡し方法は、動的ルーティングパラメータ渡しです。リンクのパス属性を設定することで、ル...

Javascript における分割代入構文の詳細な説明

序文ES6 で初めて導入された「構造化代入構文」を使用すると、配列やオブジェクトの値を異なる変数に挿...

MySQL ジョイントインデックス(複合インデックス)の実装

共同インデックスこの記事におけるジョイントインデックスの定義は次のとおりです (MySQL): AL...

mysql 結合クエリ (左結合、右結合、内部結合)

1. MySQLの一般的な接続INNER JOIN (内部結合、または等価結合): 2 つのテーブ...

Linuxの貼り付けコマンドの使い方

01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...

VMware14 に CentOS 7 をインストールするグラフィック チュートリアル

CentOS の紹介CentOS は、Red Hat Linux が提供する無料で利用できるソースコ...

Vue画像拡大鏡コンポーネントのカプセル化と使用方法の詳細な説明

Vue画像拡大鏡コンポーネントパッケージに基づいて、参考までに具体的な内容は次のとおりです。画像拡大...

CSS 評価効果の星の例

何?何のスターコートですか?さて、もっとわかりやすくするために写真を見てみましょう。 よく見ると、パ...

Mac OS10.12 に mysql5.7.18 をインストールするチュートリアル

ウェブ全体を検索して、さまざまな落とし穴を見つけましたが、問題は解決しませんでした。ついに自分でも分...

Windows Server 2008 R2 に MySQL 5.7.10 をインストールする手順

MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...

進捗バー効果を実現するJavaScript

この記事では、プログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

WeChat アプレットのカスタム タブバー コンポーネント

この記事では、WeChatアプレットのカスタムタブバーコンポーネントの具体的なコードを参考までに紹介...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...