Bagaimanakah Saya Boleh Memutar Imej Dalam Butang Bar Skrol CSS Tanpa Memusingkan Butang Itu Sendiri?

Memusing Imej Latar Belakang dalam Bar Skrol CSS: Teka-teki Putaran Selesai

Soalan:

Dalam percubaan untuk memutar imej dalam butang bar skrol Chrome, pembangun menghadapi cabaran. Walaupun sifat -webkit-transform berjaya memutar keseluruhan butang, termasuk kandungannya, mereka mencari penyelesaian untuk memutar imej sahaja.

Jawapan:

Penyelesaian terletak dalam memanfaatkan pseudo-element :before, yang mencipta elemen tambahan di dalam elemen asal. Dengan meletakkan elemen pseudo secara mutlak, mentakrifkan dimensinya dan meletakkannya secara relatif kepada elemen induk, ia menjadi "lapisan" yang berasingan.

coretan kod CSS:

#myelement:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    transform: rotate(30deg);
}

Dalam ini coretan, imej latar belakang ditetapkan dalam elemen pseudo dan diputar menggunakan sifat transformasi. Indeks-z memastikan lapisan imej kekal di belakang kandungan elemen utama. Dengan melaraskan sifat atas dan kiri, imej boleh diletakkan dalam elemen untuk berputar di sekitar pusat pilihannya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memutar Imej Dalam Butang Bar Skrol CSS Tanpa Memusingkan Butang Itu Sendiri?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!