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

推薦する

JavaScriptの基本構文とデータ型の詳細な説明

目次JavaScript のインポート1. 内部ラベル2. 外部紹介基本的な構文データ型番号弦ブール...

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

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

CSS ポインターイベント属性の使用に関する詳細な説明

フロントエンド開発では、ユーザーと直接やり取りするため、ユーザーが操作がスムーズで快適だと感じ、ネイ...

HTMLテーブルタグの詳しい解説(初心者向け)

表> <TR> <TD> <TH> <キャプション&...

nginx+WordPressで個人ブログを構築するプロセス全体の詳細な説明

0x00 はじめにWordPress は、世界で最も人気のある CMS システムです。PHP と M...

CentOS VPS に SSH 経由で MySQL をインストールする方法

yum install mysql-serverと入力します。続行するにはYを押してくださいインスト...

VMware Workstation Pro 16 グラフィックチュートリアル (CentOS8 仮想マシン クラスタの構築)

目次準備VMware Workstation Pro 16 をインストールするLinux仮想マシンの...

HTML の色に関する参考資料

HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...

MySQLカスタム関数の原理と使用法の分析

この記事では、例を使用して MySQL カスタム関数の原理と使用方法を説明します。ご参考までに、詳細...

フロントエンド JavaScript におけるリフレクションとプロキシ

目次1. 反射とは何ですか? 2. JavaScriptで反映する2.1 Reflect.get(タ...

React.Childrenの詳しい使い方

目次1. React.Children.map 2. React.Children.forEach ...

HTMLページ間でパラメータを渡すフロントエンド方式の詳細な説明

プロジェクトでよくある状況として、案件リストなどのリストが存在することがあります。リスト内の項目をク...

ブラウザのスクロールバーのスタイルを変更するための純粋な CSS の例

CSSを使用してブラウザのスクロールバーのスタイルを変更する ::-webkit-スクロールバー{ ...

MySQL シリーズ 7 MySQL ストレージ エンジン

1. MyISAM ストレージエンジン欠点:トランザクションはサポートされていません最小粒度ロック:...

Dockerにlogstashをインストールする詳細な手順

docker-compose.yml を編集し、次のコンテンツを追加します。 バージョン: '...