CSS3-Implementierungsbeispiel zum Drehen nur des Hintergrundbildes um 180 Grad

1. Mentale Reise

Als ich kürzlich das Cockpit schrieb, dachte ich über ein Problem nach, nämlich das Hintergrundbild einfach in einen bestimmten Winkel zu drehen.

Wenn ich nur die Transformation von CSS3 verwende, um den gesamten Container in einen bestimmten Winkel zu drehen, erziele ich nicht den gewünschten Effekt.

Dann habe ich diesen Effekt schließlich durch Recherche und Bezugnahme auf verwandte Artikel erzielt. Ohne weitere Umschweife ist hier der Code.

2. Code-Implementierung

Die HTML-Vorlage sieht wie folgt aus

<div Klasse="smart_development_right">
  <div Klasse="smart_development_content">
    <span>Intelligente Sensorgeräte</span>
  </div>
  <div Klasse="smart_development_content">
    <span>Online-Tarif</span>
  </div>
</div>

CSS Code

.smart_development_right{
   Position: relativ;
   Überlauf: versteckt; 
}
.wisdomGongdi .gongdi_center .center_top .smart_development_right::vor {
  Inhalt: "";
    Position: absolut;
    Breite: 100 %;
    Höhe: 100%;
    oben: 0;
    links: 0;
    z-Index: -1;
    Hintergrund: URL('/public/smart_equipment.png') 0 0 keine Wiederholung;
    transformieren: drehen (180 Grad);
}

Wenn Sie um 90 Grad nach rechts drehen möchten, ändern Sie die 180 Grad im obigen Code in 90 Grad

Wenn Sie um 90 Grad nach links drehen möchten, ändern Sie die 180 Grad im obigen Code in -90 Grad

Wenn die Idee stimmt, ist die Umsetzung ganz einfach.

Obwohl ich es letztendlich nicht verwendet habe, halte ich es dennoch für sehr nützlich und möchte es daher mit Ihnen teilen.

Verweise

Damit ist dieser Artikel über das Implementierungsbeispiel zum Drehen des Hintergrundbilds um 180 Grad mit CSS3 abgeschlossen. Weitere Informationen zum Drehen des Hintergrundbilds um 180 Grad mit CSS3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!