CSSで反転180を実現する方法

CSS でリバース 180 を実装する方法: 1. HTML サンプル ファイルを作成します; 2. div を "

" として定義します; 3. "background: url(' / public/smart_equipment.png') 0 0 no-repeat;transform:rotate(180deg);" 属性を使用して 180 度回転できます。

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター

反転 180 を達成する方法css？

CSS3 では背景画像を 180 度回転することしかできません

CSS3 では背景画像が回転します

書いているときに問題を考えました。背景画像を特定の角度に回転させるだけです。

CSS3 の transfrom を使用してコンテナ全体を特定の角度に反転するだけでは、希望する効果を実現できません。

その後、関連する記事を調べて参照することで、最終的にこの効果を実現しました。早速、コードに進みましょう。

コード実装

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{
  position: relative;
  overflow: hidden; 
}
.smart_development_right::before {
 content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: url('/public/smart_equipment.png') 0 0 no-repeat;
    transform: rotate(180deg);
}

アイデアが正しければ、非常に簡単に実装できます。

推奨学習: 「css ビデオ チュートリアル 」

以上がCSSで反転180を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。