Pengenalan terperinci kepada sifat putaran latar belakang CSS

CSS ialah salah satu teknologi bahagian hadapan yang biasa digunakan sekarang, dan ia juga merupakan langkah pertama bagi ramai orang untuk mempelajari teknologi bahagian hadapan. Putaran latar belakang CSS juga merupakan atribut penting dalam CSS, yang boleh menjadikan halaman web kelihatan lebih jelas dan tiga dimensi. Seterusnya, kami akan memperkenalkan sifat putaran latar belakang CSS secara terperinci.

1. Apakah itu penggiliran latar belakang CSS?

Putaran latar belakang CSS merujuk kepada memutar latar belakang melalui atribut transformasi dalam CSS. Apabila kita menetapkan sudut putaran dan titik pusat putaran, imej latar belakang boleh diputar mengikut parameter yang ditetapkan untuk mencapai kesan yang diingini.

2. Cara menggunakan penggiliran latar belakang CSS

Penggunaan putaran latar belakang CSS adalah sangat mudah. ​​Anda hanya perlu menetapkan imej latar belakang dan mengubah atribut, dan menetapkan nilai yang sepadan.

Kod sampel adalah seperti berikut:

div{
    background-image: url(图片地址);
    transform: rotate(45deg);
}

Dalam kod di atas, kami menggunakan elemen "div" dan menambah imej latar belakang dan mengubah atribut padanya. Antaranya, atribut imej latar belakang menentukan alamat imej latar belakang yang akan digunakan, dan atribut transformasi menetapkan sudut putaran.

3. Nilai atribut biasa ​​putaran latar belakang CSS

Dalam CSS, kita boleh melaraskan kesan putaran latar belakang CSS dengan mengubah suai nilai atribut transformasi. Berikut ialah beberapa nilai atribut putaran latar belakang CSS biasa:

1.putar(deg): Putar sudut darjah.

2.rotateX(deg): Putar keseluruhan elemen sepanjang paksi-X mengikut darjah darjah.

3.rotateY(deg): Putar keseluruhan elemen sepanjang paksi Y mengikut darjah darjah.

4.rotateZ(deg): Putar keseluruhan elemen di sepanjang paksi Z mengikut darjah darjah.

5.rotate3d(x,y,z,deg): Putar keseluruhan elemen dalam 3D mengikut darjah darjah.

4. Contoh aplikasi putaran latar belakang CSS

1. Contoh animasi putaran latar belakang ringkas

Dalam contoh berikut, kami menetapkan elemen "div" dan Gunakan putaran latar belakang CSS untuk melaksanakan kesan animasi putaran latar belakang yang mudah. Kodnya adalah seperti berikut:

div{
    width: 200px;
    height: 200px;
    background-image: url(图片地址);
    animation: rotate 3s ease-in-out infinite;
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

Dalam kod ini, kami menambahkan atribut lebar, tinggi dan imej latar belakang pada elemen "div" dan masing-masing menetapkan lebar, ketinggian dan imej latar belakangnya. Dari segi kesan animasi, kami menggunakan kata kunci @keyframes dalam CSS3 untuk mencipta animasi putaran latar belakang yang dipanggil "putar" untuk mencapai kesan dinamik elemen halaman web.

2. Gunakan putaran latar belakang CSS untuk merealisasikan imej "cinta"

Di bawah, kami menunjukkan contoh penggunaan putaran latar belakang CSS untuk merealisasikan imej "cinta". Kodnya adalah seperti berikut:

div{
    width: 150px;
    height: 150px;
    background-image: url(图片地址);
    transform: rotate(-45deg);
    position: relative;
}

div:after{
    content: "";
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;
    left: 75px;
    background-image: url(图片地址);
    transform: rotate(45deg);
}

Dalam kod di atas, kami menetapkan atribut imej latar belakang untuk elemen "div" induk dan elemen "div:after" anak, dan menggunakan atribut transformasi kepada tukarkannya dengan sewajarnya Putar untuk mencapai kesan gambar "cinta". Pada masa yang sama, disebabkan penetapan kedudukan kedudukan dan sudut putaran elemen "div:after" kanak-kanak, kami juga menyedari pemangkasan imej latar belakang elemen "div" induk.

Ringkasan

Di atas ialah pengenalan terperinci kepada atribut putaran latar belakang CSS. Dengan mengkaji atribut ini, kita boleh mempunyai pemahaman yang lebih mendalam tentang atribut transformasi dalam teknologi CSS, dan boleh menggunakan teknologi CSS dengan lebih mahir untuk mencipta elemen halaman web yang lebih jelas dan tiga dimensi.

Atas ialah kandungan terperinci Pengenalan terperinci kepada sifat putaran latar belakang CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!