Bagaimana untuk melaksanakan fungsi putaran latar belakang dalam css3

Dalam reka bentuk web moden, penggunaan imej latar belakang adalah sangat biasa. Untuk menjadikan halaman web kelihatan lebih terang dan menarik, kami boleh menggunakan pelbagai cara untuk mempersembahkan imej latar belakang, seperti jubin, ulangan, regangan, dsb. Salah satu daripadanya, dipanggil Putaran Latar Belakang, ialah pilihan yang baik. Dalam CSS3, kita boleh mencapai kesan ini dengan menggunakan atribut transform dan fungsi rotate(). Dalam artikel ini, kami akan melihat dengan lebih dekat ciri penggiliran latar belakang ini dan memberikan beberapa contoh aplikasi.

Sintaks asas putaran latar belakang CSS3

Sifat transformasi CSS3 ialah salah satu sifat penting transformasi CSS, yang boleh memutar, menskala, mengubah bentuk dan elemen condong. Antaranya, fungsi rotate() digunakan untuk melaksanakan putaran Sintaksnya adalah seperti berikut:

transform: rotate(angle);

Antaranya, sudut ialah nilai sudut, iaitu sudut yang perlu anda putar. Berikut ialah contoh mudah:

.box {
    width: 200px;
    height: 200px;
    background: url("image.jpg") no-repeat center center;
    transform: rotate(45deg);
}

Gaya ini akan memutarkan kotak dengan imej "image.jpg" sebagai latar belakang 45 darjah lawan jam

Dengan cara ini, kita boleh Latar belakang atas imej diputar ke dalam gaya dinamik, yang menarik dan jelas.

Contoh aplikasi penggiliran latar belakang CSS3

Putaran latar belakang CSS3 boleh menambah keceriaan dan kemeriahan pada halaman web kami. Di bawah adalah beberapa contoh aplikasi.

1. Kad Pusingan

Reka bentuk kad digunakan secara meluas dalam halaman web moden dengan padat menyusun kandungan yang berkaitan supaya pengguna dapat melihatnya dengan pantas. Dengan menggunakan putaran latar belakang, kami boleh menjadikan kad kelihatan lebih tiga dimensi dan meningkatkan pengalaman visual pengguna. Berikut ialah contoh:

.card {
    width: 300px;
    height: 200px;
    background: url("image.jpg") no-repeat center center;
    border-radius: 10px;
    transform-style: preserve-3d;
    transition: all .5s ease-in-out;
}

.card:hover {
    transform: rotateY(180deg);
}

Contoh ini akan menggunakan gambar "image.jpg" sebagai latar belakang kad dan menggunakan atribut gaya transformasi dan atribut animasi peralihan untuk mencapai kesan peralihan putaran . Apabila pengguna menuding pada kad, imej latar belakang serta-merta berputar 180 darjah.

2. Memutar Menu

Dengan menggunakan putaran latar belakang, kami juga boleh menambah beberapa kesan khas pada bar menu dalam halaman web. Dalam contoh, kami melaraskan latar belakang setiap item dalam menu kepada segi empat sama kecil dengan hanya satu garis menegak hitam, supaya menu tidak kelihatan terlalu rumit. Putaran latar belakang adalah untuk kesan visual Blok akan berputar apabila pengguna melayang untuk meningkatkan dinamik dan minat.

.nav {
    display: flex;
    justify-content: center;
}

.nav-item {
    width: 50px;
    height: 50px;
    margin: 0 10px;
    background: #fff;
    background-image: linear-gradient(to bottom, #ccc, #ccc 50%, transparent 50%, transparent);
    background-size: 10px 10px;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all .5s ease-in-out;
}

.nav-item:hover {
    background-color: #ccc;
    transform: rotate(360deg);
}

Dalam contoh ini, kami menjadikan latar belakang item menu terutamanya berwarna putih, menjadikan segi empat sama kecil dalam sempadan bulat. Apabila menuding pada item menu, kotak akan berputar sekali, menjadikan menu lebih interaktif.

Ringkasan

Dengan menggunakan fungsi rotate() atribut transform, kita boleh menjadikan kesan putaran imej latar belakang sangat mudah, dengan itu menambahkan minat dan kejelasan pada halaman web. Dan dengan menggunakan beberapa kreativiti, seperti menerapkannya pada elemen seperti kad dan menu, kami juga boleh mencipta kesan interaktif yang sangat menarik. Sila cuba gunakan ciri ini pada reka bentuk web anda untuk membawa pengalaman deria yang lebih baik kepada pengguna anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi putaran latar belakang dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!