Perspektif dan Rotasi Sparkle: Efek CSS3D Mewah Untuk Gambar – Beragampengetahuan

Kita semua setuju bahwa efek 3D itu keren, bukan? Saya kira begitu, terutama jika digabungkan dengan animasi yang halus. Pada artikel ini, kita akan mengeksplorasi beberapa trik CSS untuk membuat efek 3D yang menakjubkan!

“Mengapa kita membutuhkan artikel lain tentang efek CSS 3D… bukankah sudah ada jutaan?” Ya, tapi ini sedikit spesial karena kita akan menggunakan HTML sesedikit mungkin. Faktanya, ini adalah satu-satunya markup yang kami gunakan untuk membuat beberapa efek CSS yang menakjubkan untuk gambar:

<img src="" alt="">

Itu dia!yang kita butuhkan adalah <img> Label. Segala sesuatu yang lain akan dilakukan di CSS.

Begini cara kerjanya. Kami akan menjelajahi tiga efek berbeda yang tidak terkait satu sama lain, tetapi mungkin meminjam beberapa dari satu sama lain. Anda tidak perlu membaca seluruh artikel sekaligus. Bahkan, saya merekomendasikan membaca satu bagian pada satu waktu, meluangkan waktu untuk memahami konsep dan apa yang dilakukan kode yang mendasarinya sebelum beralih ke efek lainnya.

Daftar isi

CSS 3D Bersinar

Untuk efek pertama, kami akan menambahkan animasi berkilau ke gambar, serta sedikit rotasi saat melayang.

Kotak hijau mengilustrasikan gradien, di mana garis biru menentukan perhentian warna yang kita gunakan.Awalnya ditempatkan di 100% 100%pada hover kita geser ke 0 0. Efek slide akan memindahkan bagian gradien (buram) diagonal di sepanjang gambar untuk menciptakan efek kilau.

Ini demo lengkapnya. Saya bahkan menyertakan varian kedua untuk Anda bongkar dan selidiki cara kerjanya.

ini clip-path Mendefinisikan wilayah kliping, kita perlu wilayah tetap tetap. Itu sebabnya kami menambahkan terjemahan pada hover untuk memindahkan gambar ke arah yang berlawanan dengan arah mouseover. clip-path.

Begini cara kerjanya.Pertama, kami menambahkan beberapa padding ke bagian atas dan bawah gambar, dan terapkan outline Itu hitam tembus pandang.

Kedua, kami menerapkan angka negatif outline-offset jadi seperti ini outline Hamparkan gambar kiri dan kanan, tetapi pertahankan bagian atas dan bawah:

img {
  --d: 18px;  /* depth */

  padding-block: var(--d);
  outline: var(--d) solid #0008;
  outline-offset: calc(-1 * var(--d));
}

Perhatikan bahwa saya membuat variabel, --duntuk mengontrol ketebalan outline. Inilah yang memberikan kedalaman gambar.

Langkah terakhir adalah menambahkan clip-path. Kami membutuhkan poligon dengan delapan poin.

Titik merah sudah diperbaiki dan titik hijau adalah yang akan kita animasikan untuk menunjukkan kedalaman. Saya tahu ini jauh dari kotak 3D, tetapi visual berikutnya (di mana kami menambahkan rotasi) memberikan ilustrasi yang lebih baik.

Awalnya, gambar diputar pada sudut tertentu. Titik hijau di sebelah kanan sejajar dengan titik merah.Karena itu, kami bersembunyi outline di sisi itu sehingga hanya terlihat di sisi kiri. Kedalaman kotak 3D kita ada di sebelah kiri.

Saat melayang, kami memindahkan titik hijau di sebelah kiri sambil memutar gambar.Di tengah animasi, semua titik hijau disejajarkan dengan titik merah, dengan sudut rotasi sama dengan 0deg,bersembunyi outline Dan berikan gambar tampilan yang datar.

Kami kemudian terus berputar, dan titik hijau di sebelah kanan bergerak sementara titik hijau di sebelah kiri tetap di tempatnya. Kami mendapatkan efek 3D yang sama, tetapi dengan kedalaman di sebelah kanan.

Harap bersabar, karena blok kode selanjutnya akan terlihat sangat membingungkan pada awalnya.Ini karena beberapa variabel baru dan poligon delapan titik yang kita gambar di atasnya clip-path Properti.

@property --_l {
  syntax: "<flength>";
  initial-value: 0px;
  inherits: true;
}
@property --_r {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

img {
  --d: 18px;  /* depth */
  --a: 20deg; /* angle */
  --x: 10px;

  --_d: calc(100% - var(--d));
  --_l: 0px;
  --_r: 0px;

  clip-path: polygon(
    /* The two green points on the left */
    var(--_l) calc(var(--_d) - var(--x)),
    var(--_l) calc(var(--d)  + var(--x)),

    /* The two red points on the top */
    var(--d) var(--d),var(--_d) var(--d),

    /* The two green points on the right */
    calc(var(--_d) + var(--_r)) calc(var(--d)  + var(--x)),
    calc(var(--_d) + var(--_r)) calc(var(--_d) - var(--x)),

    /* The two red points on the bottom */
    var(--_d) var(--_d),var(--d) var(--_d)

    );
  transition: transform .3s, --_r .15s, --_l .15s .15s;
}

/* Update the points of the polygon on hover */
img:hover{
  --_l: var(--d);
  --_r: var(--d);
  --_i: -1;
  transition-delay: 0s, .15s, 0s;
}

Saya menggunakan komentar untuk membantu menjelaskan apa yang dilakukan kode.Perhatikan saya menggunakan variabel --_l Dan --_r Menentukan lokasi titik hijau.Saya menganimasikan variabel-variabel ini 0 kedalaman (--d) nilai.ini @property Deklarasi di atas memungkinkan kita untuk menganimasikan variabel dengan menentukan jenis nilainya (<length>).

catatan: Saat ini tidak didukung oleh semua browser @property. Jadi saya menambahkan fallback ke demo dengan animasi yang sedikit berbeda.

Setelah poligon digambar clip-path atribut, hal berikutnya yang dilakukan kode adalah menerapkan a transition Menangani rotasi.rotasi penuh berlangsung .3sjadi titik hijau perlu bertransisi setengah dari durasi tersebut (.15s). Saat melayang, titik poligon di sebelah kiri segera bergerak (0s), sedangkan titik di sebelah kanan bergerak setengah waktu (oleh .15s Menunda). Kami menggunakan penundaan yang berbeda ketika kami meninggalkan status hover karena kami harus segera memindahkan titik yang benar (0s) sedangkan titik di sebelah kiri bergerak setengah durasi.

Begitulah masalahnya --x variabel, kan?Jika Anda memeriksa gambar pertama yang saya berikan untuk ilustrasi clip-path Dots, Anda akan melihat bahwa titik hijau sedikit diimbangi dari tepi atas dan bawah, yang logis untuk mensimulasikan efek 3D.ini --x Variabel mengontrol berapa banyak pergeseran yang terjadi, tetapi perhitungan di baliknya agak rumit dan tidak mudah diekspresikan dalam CSS. Jadi kami memperbaruinya secara manual berdasarkan kasus hingga kami mendapatkan nilai yang tepat.

Inilah hasil akhir kami!

Lihat gambar pena 3D dengan efek hover oleh Temani Afif.

bungkus

Saya harap Anda menikmati, dan bahkan menantang, eksplorasi efek gambar 3D CSS ini. Kami telah menggunakan banyak fitur CSS lanjutan termasuk mask, kliping, gradien, transisi, dan kalkulasi untuk membuat beberapa efek hover yang luar biasa untuk gambar yang tidak Anda lihat setiap hari.

Kami melakukan ini dengan cara yang hanya membutuhkan satu baris HTML.TIDAK divS. Tidak ada kelas atau ID. Tidak ada elemen semu.hanya satu <img> Tab adalah semua yang kita butuhkan. Ya, memang benar bahwa lebih banyak markup mungkin membuat CSS tidak terlalu rumit, tetapi fakta bahwa ia bergantung pada elemen HTML biasa berarti CSS dapat digunakan lebih luas. CSS cukup kuat untuk melakukan semua ini pada satu elemen!

Saya telah menulis secara ekstensif tentang gaya gambar CSS tingkat lanjut. Jika Anda mencari lebih banyak ide dan inspirasi, saya mendorong Anda untuk melihat artikel berikut yang telah saya publikasikan:

Saya juga menjalankan situs bernama Tips CSS yang mengeksplorasi lebih banyak efek mewah – berlangganan umpan RSS untuk mengikuti eksperimen yang saya lakukan di sana!

Bacaan lebih lanjut di SmashingMag

Hasilkan $200 seminggu
Kutipan dari artikel di Smashing Magazine — Untuk Desainer dan Pengembang Web