Comment réaliser l'inversion 180 en CSS

Comment inverser 180 en CSS : 1. Créez un exemple de fichier HTML ; 2. Définissez le div comme "

"; 3. Passez "background: url('/public/smart_equipment. png') 0 0 no-repeat;transform: rotate(180deg);" L'attribut peut être utilisé pour faire pivoter de 180 degrés.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment réaliser l'inversion 180 en css ?

CSS3 ne fait pivoter l'image d'arrière-plan que de 180 degrés

CSS3 fait pivoter l'image d'arrière-plan

Lorsque j'écrivais le cockpit récemment, j'ai réfléchi à un problème, qui consiste simplement à faire pivoter l'image d'arrière-plan selon un certain angle.

Utiliser uniquement le transfrom de CSS3 pour retourner l'ensemble du conteneur sous un certain angle ne peut pas obtenir l'effet souhaité.

Ensuite, j'ai finalement obtenu cet effet en recherchant et en me référant à des articles pertinents. Sans plus tarder, passons au code.

Implémentation du code

Le modèle HTML est le suivant

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

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

Si l'idée est bonne, alors elle sera très simple à mettre en œuvre.

Apprentissage recommandé : "Tutoriel vidéo CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!