Bagaimana untuk mencapai penyongsangan 180 dalam css

Cara membalikkan 180 dalam css: 1. Buat fail sampel HTML 2. Takrifkan div sebagai "

" 3. Lulus "background: url('/ public/smart_equipment.png') 0 0 no-repeat;transform: rotate(180deg);" attribute boleh digunakan untuk memutar 180 darjah.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3, komputer DELL G3

Cara mencapai penyongsangan 180 dalam css?

CSS3 hanya membenarkan imej latar belakang berputar 180 darjah

CSS3 memutar imej latar belakang

Saya memikirkan masalah baru-baru ini apabila saya menulis kokpit Ia hanya memutar imej latar belakang ke sudut tertentu.

Hanya menggunakan transfrom CSS3 untuk membalikkan keseluruhan bekas ke sudut tertentu tidak boleh mencapai kesan yang saya inginkan.

Kemudian akhirnya saya mencapai kesan ini dengan menyelidik dan merujuk kepada artikel yang berkaitan Tanpa berlengah lagi, mari kita pergi ke kod.

Pelaksanaan kod

Templat HTML adalah seperti berikut

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

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

Jika idea itu betul , maka Ia akan menjadi sangat mudah untuk dilaksanakan.

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk mencapai penyongsangan 180 dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!