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

推薦する

Win10 の Linux サブシステムを有効にする方法を説明します (詳細な画像とテキスト付き)

今日は、Windows 10 で Linux サブシステムを有効にする方法を紹介します。早速、手順を...

CSS3のtransform属性で実装される4つの機能

CSS3 では、transform 関数を使用して、テキストや画像の回転、拡大縮小、傾斜、移動という...

MySql 組み込み関数の自習知識ポイントまとめ

文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...

VMware 仮想マシンでの CentOS7 ネットワーク構成 (ホストのワイヤレス インターネット アクセス)

CentOS7 システムを使用するのは今回が初めてで、ネットワーク構成を行う際に多くの問題が発生し...

Dockerイメージの階層化の原理の詳細な説明

ベースイメージベースイメージには 2 つの意味があります。他のイメージに依存せず、ゼロから構築します...

CSS 読み込み効果の実装 パックマン

えーっと、名前はただの推測です 2333序文これは練習用の CSS デモです。何か間違っている点があ...

MySQL データベースのインデックス順序の詳細な説明

目次事件の原因解剖学ファイルの並べ替えファイルのソートが非常に遅いのですが、他に解決策はありますか?...

Vue3 でモバイル ログインおよび登録モジュールをエレガントに実装する方法

目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...

カラフルな時計効果を実現する JavaScript キャンバス

キャンバスを使ってカラフルな時計を書いてみよう! 1. タイトル(1)時計のケースが与えられ、ページ...

Node.jsはMySQLデータベースの実戦記録を追加、削除、変更、チェックします

目次プロジェクトでデータベースを操作する3つのステップデータベースを操作するための具体的な手順1: ...

ウェブページの内部アンカーポイントを実現するための純粋なCSSの上下オフセットコード例

最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...

MYSQL 文字関数を使用してデータをフィルタリングすることに関する質問

問題の説明:構造:テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...

Vueはカスタムツリーコンポーネントを再帰的に実装します

この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...

Vueモバイル端末に最適な適応ソリューションについての簡単な説明

序文: 最近の医療モバイル プロジェクトに基づいて、Vue はさまざまな画面のさまざまな画面サイズに...

js で 0ms 遅延タイマーを実装するいくつかの方法

目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...