Lukisan CSS: bagaimana untuk mencapai kesan grafik 3D yang mudah

Lukisan CSS: Bagaimana untuk mencapai kesan grafik 3D yang ringkas

Dalam reka bentuk web moden, untuk menambahkan beberapa dinamik dan tiga dimensi pada halaman, kesan grafik 3D sering diperlukan. Walaupun pada masa lalu, untuk mencapai kesan 3D mungkin memerlukan penggunaan JavaScript atau enjin 3D profesional, CSS kini cukup berkuasa untuk mencapai beberapa kesan grafik 3D yang mudah. Artikel ini akan memperkenalkan cara menggunakan CSS untuk melukis grafik 3D mudah dan memberikan contoh kod khusus.

1. Melukis Kiub

Untuk melukis kiub ringkas, kita boleh menggunakan sifat transformasi CSS. Pertama, kita memerlukan elemen dengan enam sisi Kita boleh menggunakan elemen div dan menetapkan lebar dan ketinggiannya kepada nilai yang sama. Kemudian, gunakan sifat transformasi CSS untuk memutar, menskalakan dan mengalihkan elemen untuk mencapai kesan 3D.

Berikut ialah kod contoh CSS ringkas untuk kubus:

<style>
    .cube {
        width: 200px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(45deg) rotateY(45deg);
    }
    
    .face {
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
    }
    
    .front {
        background-color: red;
        transform: translateZ(100px);
    }
    
    .back {
        background-color: green;
        transform: translateZ(-100px) rotateY(180deg);
    }
    
    .top {
        background-color: blue;
        transform: translateY(-100px) rotateX(90deg);
    }
    
    .bottom {
        background-color: yellow;
        transform: translateY(100px) rotateX(-90deg);
    }
    
    .left {
        background-color: orange;
        transform: translateX(-100px) rotateY(-90deg);
    }
    
    .right {
        background-color: purple;
        transform: translateX(100px) rotateY(90deg);
    }
</style>

<div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face left"></div>
    <div class="face right"></div>
</div>

Dalam kod di atas, kami mentakrifkan elemen dengan kubus kelas sebagai bekas kubus dan menggunakan sifat transformasi CSS untuk menetapkan sudut putarannya. Pada masa yang sama, elemen dengan muka kelas juga ditakrifkan sebagai setiap muka kubus, dan warna latar belakang yang berbeza ditetapkan untuk setiap muka.

2. Melukis Silinder

Untuk melukis silinder ringkas, anda boleh menggunakan unsur pseudo dan kecerunan CSS. Pertama, kita memerlukan bekas dengan bahagian bawah bulat, dan buat dua elemen pseudo dalam bekas, satu mewakili sisi dan satu mewakili bahagian atas. Kemudian, gunakan sifat transformasi CSS untuk memutar dan mengalihkan bekas untuk mencapai kesan 3D.

Berikut ialah kod contoh CSS mudah untuk silinder:

<style>
    .cylinder {
        position: relative;
        width: 200px;
        height: 300px;
        transform-style: preserve-3d;
        transform: rotateX(60deg) rotateY(30deg);
    }
    
    .cylinder::before,
    .cylinder::after {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        background: linear-gradient(to bottom, #ff5f5f, #ff2929);
        border-radius: 50%;
        opacity: 0.8;
    }
    
    .cylinder::before {
        transform: translateZ(-100px);
        top: 50px;
    }
    
    .cylinder::after {
        transform: translateZ(100px);
        bottom: 50px;
    }
</style>

<div class="cylinder"></div>

Dalam kod di atas, kami mentakrifkan elemen dengan silinder kelas sebagai bekas silinder dan menggunakan sifat transformasi CSS untuk menetapkan sudut putarannya. Dengan menggunakan ::before dan ::after pseudo-elements, kami mencipta sisi dan bahagian atas silinder masing-masing, dan menggunakan sifat CSS linear-gradient untuk menetapkan warna latar belakang kecerunan.

Ringkasan

Dengan menggunakan sifat transformasi CSS, kita boleh mencapai beberapa kesan grafik 3D yang mudah, seperti kiub dan silinder. Kesan ini bukan sahaja boleh menambah tiga dimensi pada halaman, tetapi juga meningkatkan pengalaman pengguna. Saya harap contoh kod yang disediakan dalam artikel ini membantu anda Jika anda mempunyai sebarang pertanyaan, sila tinggalkan mesej.

Atas ialah kandungan terperinci Lukisan CSS: bagaimana untuk mencapai kesan grafik 3D yang mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!