CSS3 implementation example of rotating only the background image 180 degrees

1. Mental Journey

When I was writing the cockpit recently, I thought about a problem, which is to simply rotate the background image to a certain angle.

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

Then I finally achieved this effect by researching and referring to related articles. Without further ado, here is the code.

2. Code Implementation

The HTML template is as follows

<div class="smart_development_right">
  <div class="smart_development_content">
    <span>Intelligent sensing devices</span>
  </div>
  <div class="smart_development_content">
    <span>Online Rate</span>
  </div>
</div>

CSS Code

.smart_development_right{
   position: relative;
   overflow: hidden; 
}
.wisdomGongdi .gongdi_center .center_top .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 you want to rotate 90 degrees to the right, change the 180deg in the above code to 90deg

If you want to rotate 90 degrees to the left, change the 180deg in the above code to -90deg

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

Although I didn’t use this in the end, I still think it is very useful, so I would like to share it with you.

References

This concludes this article about the implementation example of rotating only the background image 180 degrees with CSS3. For more information about rotating the background image 180 degrees with CSS3, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!