So erreichen Sie die Inversion 180 in CSS

So kehren Sie 180 in CSS um: 1. Erstellen Sie eine HTML-Beispieldatei. 2. Definieren Sie das Div als „

“; png') 0 0 no-repeat;transform: rotation(180deg);“-Attribut kann zum Drehen um 180 Grad verwendet werden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer

Wie erreicht man die Inversion 180 in CSS?

CSS3 dreht das Hintergrundbild nur um 180 Grad

CSS3 dreht das Hintergrundbild

Als ich kürzlich das Cockpit schrieb, dachte ich über ein Problem nach, das darin besteht, das Hintergrundbild einfach um einen bestimmten Winkel zu drehen.

Nur die Verwendung von CSS3s Transfrom zum Drehen des gesamten Containers in einen bestimmten Winkel kann nicht den gewünschten Effekt erzielen.

Dann habe ich diesen Effekt endlich erreicht, indem ich relevante Artikel recherchiert und darauf verwiesen habe. Kommen wir ohne weitere Umschweife zum Code.

Code-Implementierung

Die HTML-Vorlage lautet wie folgt:

<div class="smart_development_right">
  <div class="smart_development_content">
    <span>智能感知设备</span>
  </div>
  <div class="smart_development_content">
    <span>在线率</span>
  </div>
</div>

CSS-Code

.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);
}

Wenn die Idee stimmt, ist die Implementierung sehr einfach.

Empfohlenes Lernen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo erreichen Sie die Inversion 180 in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!