Bagaimana untuk memutar latar belakang dengan css

Latar Belakang Berputar CSS

CSS (Cascading Style Sheets) ialah teknologi yang digunakan secara meluas untuk mengawal penampilan dan reka letak halaman web. Anda boleh menggunakan CSS untuk mengawal latar belakang, termasuk warna, imej dan kedudukan. Walau bagaimanapun, CSS juga mempunyai ciri yang hebat, iaitu anda boleh memutar latar belakang untuk menambah beberapa penampilan unik pada tapak web.

Idea asas untuk memutar latar belakang adalah menggunakan atribut transformasi CSS3. Sifat ini membenarkan pembangun mengubah elemen dengan menentukan transformasi matriks mereka dalam dua atau tiga dimensi. Menggunakan fungsi rotate() kita boleh memutarkan objek. Kita juga boleh menggunakan fungsi translate() untuk menetapkan koordinat x dan y objek.

Mari lihat beberapa contoh yang menunjukkan cara memutar latar belakang menggunakan CSS.

Contoh 1: Putar latar belakang warna pepejal menggunakan CSS

Mula-mula, mari kita lihat cara memutar latar belakang warna pepejal menggunakan CSS. Kita boleh melakukan ini dengan kod CSS berikut:

div {
    height: 100vh;
    width: 100vw;
    background-color: #FF6633;
    position: relative;
    transform: rotate(30deg);
    transform-origin: center;
}

Dalam contoh ini, elemen div mempunyai ketinggian dan lebar yang sama dengan saiz viewport. Warna latar belakang ditetapkan kepada oren. Kedudukan adalah relatif kepada aliran dokumen Dengan menggunakan atribut transform dan fungsi rotate(), kita boleh memutarkan latar belakang 30 darjah untuk memberikan kesan senget pada halaman. Kami juga menetapkan sifat asal-ubah supaya putaran berlaku di sekitar titik tengah.

Contoh 2: Putar latar belakang imej menggunakan CSS

Kita boleh menggunakan teknik yang sama untuk memutar latar belakang imej. Berikut ialah contoh yang menunjukkan cara memutar imej latar belakang menggunakan CSS:

div {
    height: 100vh;
    width: 100vw;
    background-image: url("background.jpg");
    background-size: cover;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background-image: inherit;
    transform: rotate(30deg);
    z-index: -1;
}

Dalam contoh ini, kami menggunakan elemen div dengan imej latar belakang. Kami menetapkan sifat background-size:cover untuk menyesuaikan imej latar belakang supaya ia berputar tanpa sebarang pemotongan. Kami juga menyembunyikan imej latar belakang dengan menggunakan limpahan: atribut tersembunyi.

Seterusnya, kami menggunakan elemen pseudo :before untuk mencipta imej latar belakang dengan saiz yang sama, kemudian putarkannya 30 darjah, menggunakan atribut indeks-z untuk meletakkannya di bawah latar belakang. Dengan menetapkan bahagian atas: -50% dan kiri: -50% sifat, kedudukannya adalah relatif kepada titik tengah elemen div induk.

Contoh 3: Menggunakan CSS untuk memutar latar belakang teks

Kami juga boleh menggunakan CSS untuk memutar teks sebagai latar belakang. Berikut ialah contoh yang menunjukkan cara memutar latar belakang teks menggunakan CSS:

div {
    height: 100vh;
    width: 100vw;
    font-size: 80px;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background: #FF6633;
    transform: rotate(30deg);
    z-index: -1;
}

h1 {
    color: #FFFFFF;
    transform: rotate(-30deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Dalam contoh ini, kami menggunakan elemen div dengan teks dan meletakkannya dalam :before dengan kedudukan dan saiz yang sama pada pseudo unsur. Kami memutarkan :before pseudo-elemen sebanyak 30 darjah menggunakan atribut transform:rotate(30deg) dan menetapkan warnanya kepada oren.

Seterusnya, kami menggunakan atribut transform: rotate(-30deg) untuk memutarkan teks sebanyak 30 darjah dan menyelaraskannya dengan induk dengan menetapkan kedudukan: mutlak dan atas: 50% dan kiri: 50% Pusat daripada elemen div. Akhir sekali gunakan atribut terjemah(-50%, -50%) untuk memusatkannya.

Ringkasan

Latar belakang berputar CSS ialah kesan hebat yang boleh digunakan untuk menjadikan tapak web kelihatan lebih menarik dan menarik. Dalam artikel ini, kami menggunakan contoh latar belakang warna pepejal, latar belakang imej dan latar belakang teks untuk menunjukkan cara memutar latar belakang menggunakan CSS. Sifat transform:rotate() yang kami gunakan dalam demo adalah sangat mudah untuk memutar latar belakang dengan menentukan darjah.

Atas ialah kandungan terperinci Bagaimana untuk memutar latar belakang dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!