How to achieve inversion 180 in css

How to implement reverse 180 in css: 1. Create an HTML sample file; 2. Define the div as "

"; 3. Pass "background: url('/ public/smart_equipment.png') 0 0 no-repeat;transform: rotate(180deg);" attribute can be used to rotate 180 degrees.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to achieve inversion 180 in css?

CSS3 only allows the background image to rotate 180 degrees

CSS3 rotates the background image

I pondered a problem when I was writing the cockpit recently. It simply rotates the background image to a certain angle.

Only using CSS3's transfrom to flip the entire container to a certain angle cannot achieve the effect I want.

Then I finally achieved this effect by researching and referring to relevant articles. Without further ado, let’s get to the code.

Code implementation

HTML template is as follows

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

If the idea is right, then it will be implemented very simple.

Recommended learning: "css video tutorial"

The above is the detailed content of How to achieve inversion 180 in css. For more information, please follow other related articles on the PHP Chinese website!