Cara Membuat Desain 3D Dengan CSS3 Transform Property

Ada dua dimensi dalam hal properti transformasi CSS3, 2D dan 3D. Saat menganimasikan, transformasi digunakan untuk membuat elemen berubah dari satu status ke status lainnya. Tutorial ini berfungsi sebagai perluasan dari panduan ini tentang animasi 2D. Saya akan memberikan beberapa wawasan tentang desain 3D dan bagaimana Anda dapat membuat animasi yang luar biasa dengan menggabungkan konsep-konsep dasar ini.

Transformasi 3D bisa sangat mendetail, dan bisa menjadi rumit jika ada banyak bagian berbeda yang digabungkan, jadi memulai dengan blok penyusun dasar sangat membantu. Beberapa dari konsep ini akan terlihat familier, tetapi "z" adalah sesuatu yang akan terlihat baru saat bekerja dalam 3D. Transformasi 3D memperluas transformasi CSS 2D untuk menyertakan sumbu z, memungkinkan transformasi 3D elemen DOM.

Apa itu Z-Axis?

Akan ada banyak referensi ke sumbu z. Sangat mudah untuk menganggapnya sebagai jarak pengukuran sesuatu yang menuju atau menjauh dari Anda. Jika itu adalah nilai positif, itu lebih dekat dengan Anda. Jika itu adalah nilai negatif, itu lebih jauh dari Anda.

Contoh Transformasi 3D

Properti dasar untuk transformasi 3D adalah translate3d , scale3d , rotateX , rotateY , rotateZ , perspective , dan matrix3d ​​. Lebih banyak argumen disertakan dengan translate3d , scale3d , dan matrix3d ​​karena mereka menggunakan argumen untuk x,y, dan z. Properti skala mengambil nilai untuk sudut dan perspektif juga mengambil satu nilai.

Menerjemahkan

terjemahkanZ()

Ini mendefinisikan terjemahan 3D dengan hanya menggunakan nilai sumbu z. Anda mungkin ingat menerjemahkan x dan y dari terjemahan 2D. Idenya sama dengan translateX() , translateY() , dan translateZ() karena masing-masing mengambil nilai panjang yang menggerakkan elemen dengan jarak yang ditentukan sepanjang sumbu yang benar.

Dalam contoh ini, translateZ(-20px) akan memindahkan elemen sejauh 20 piksel dari penampil.

Berikut cuplikan kode untuk membuat contoh ini:

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

terjemahkan3d()

Fungsi translate3d() digunakan untuk memindahkan posisi elemen dalam ruang 3D. Transformasi ini dibuat dengan menentukan koordinat yang menentukan seberapa banyak pergerakannya di setiap arah.

transform: translate3d(20px, -15px, 70px); memindahkan gambar 20 piksel sepanjang sumbu x positif, 15 piksel pada sumbu y negatif, dan kemudian 70 piksel sepanjang sumbu z positif.

Ini contoh translate3d :

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

Sangat jelas bahwa ada beberapa tumpang tindih dari kotak kedua yang terjadi. Ini mungkin tidak terlihat sedramatis yang diharapkan, tetapi menambahkan properti perspektif (selanjutnya dalam tutorial ini) akan membantu.

Memutar

Fungsi rotate3d() memutar elemen dalam ruang 3D dengan sudut yang ditentukan di sekitar sumbu. Ini dapat ditulis sebagai rotate(x, y, z, angle) .

putarX()

Nilai piksel tidak akan berfungsi di sini, harus dalam derajat. Metode rotateX() memutar elemen di sekitar sumbu x pada derajat tertentu. Lihat bagaimana persegi panjang lebih pendek? Itu sedang diputar sepanjang sumbu x. Contoh ini menunjukkan rotasi pada 55 derajat.

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

putarY()

Metode rotateY() memutar elemen di sekitar sumbu y-nya. Perhatikan bagaimana persegi panjang bawah tidak selebar bagian atas? Diputar sehingga tidak terlihat selebar persegi panjang di atas karena diputar 60 derajat.

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

putarZ()

Metode rotateZ() memutar elemen di sekitar sumbu z dengan derajat tertentu. Dalam hal ini, nilainya adalah 120 derajat.

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

putar3d()

Fungsi rotate3d(1, -1, 1, 45deg) memutar gambar sepanjang sumbu y dengan sudut 45 derajat. Penting untuk diperhatikan bahwa Anda dapat menggunakan nilai negatif untuk memutar elemen ke arah yang berlawanan.

Karena ini lebih kompleks daripada spesifikasi sumbu tunggal, rotate3d dapat dipecah seperti ini: rotate3d(x,y,z,angle) di mana x=1, y=-1, z=1, dan sudut rotasi = 45 derajat .

Kode untuk gaya ini terlihat seperti:

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

Menguji Dasar-Dasar

Searah jarum jam sepanjang sumbu x sebesar 45 derajat.

 transform: rotate3d(1, 0, 0, 45deg);

Searah jarum jam sepanjang sumbu y sebesar 45 derajat.

 transform: rotate3d(0, 1, 0, 45deg);

Searah jarum jam sepanjang sumbu z sebesar 45 derajat.

 transform: rotate3d(0, 0, 1, 45deg);

Perlu disebutkan bahwa tergantung pada nilai yang ditentukan, terkadang rotasi tidak akan terlihat; misalnya, ini tidak akan terlihat: transform: rotate3d(0, 0, 0, 50deg);

Perspektif

Ini mungkin transformasi yang paling "berdimensi". Di sinilah Anda benar-benar akan mendapatkan perspektif. Jika Anda menerapkan transformasi 3D ke elemen tanpa menyetel perspektif, efek yang dihasilkan tidak akan muncul sebagai tiga dimensi. Ini adalah sesuatu yang dapat ditambahkan ke properti di atas juga.

Untuk mengaktifkan ruang 3D, sebuah elemen membutuhkan perspektif. Ini dapat diterapkan dengan dua cara: menggunakan properti transform atau properti perspective .

Properti transform akan terlihat seperti ini: transform: perspective(600px); dan properti perspektif akan terlihat seperti ini: perspective: 600px; .

Contoh berikut akan mengubahnya di antara keduanya, jadi pastikan untuk melihat lebih dekat kodenya.

Nilai perspective menentukan seberapa intens efek 3D itu. Pikirkan nilai rendah sebagai hal yang sangat terlihat, seperti bagaimana rasanya saat Anda melihat objek besar. Ketika ada nilai yang lebih besar, efeknya kurang kuat.

Posisi titik hilang juga bisa disesuaikan. Perlu disebutkan, dan banyak eksperimen, karena ini relevan dengan perspektif CSS. Secara default, titik hilang untuk ruang 3D diposisikan di tengah. Gunakan properti perspektif-asal untuk mengubah posisi titik hilang. Itu akan terlihat seperti: perspective-origin: 15% 55% .

Skala

skalaZ()

Ini mendefinisikan transformasi skala 3D dengan memberikan nilai untuk sumbu z. Karena hanya menskala sepanjang sumbu z, fungsi lain diperlukan untuk mendemonstrasikan efek penskalaan. Lihat bagaimana persegi panjang mengarah ke penampil dan bagaimana itu benar-benar menunjukkan perspektif?

Untuk sepenuhnya memahami scale(Z), bermain-main dengan nilainya dan Anda akan melihat perspektif menjadi "lebih tajam" dengan nilai yang lebih besar.

skala3d(x,y,z)

Fungsi scale3d() mengubah ukuran elemen dan ditulis sebagai scale(x, y, z) . Seperti scaleZ , tidak terlihat seperti apa perspektif sepenuhnya kecuali jika digunakan dengan perspective .

Contoh ini menggunakan ini:

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

Catatan singkat: Jika ketiga koordinat vektor sama, penskalaannya seragam dan tidak akan ada perbedaan mencolok.

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

Matrix3d()

Matriks 2D dapat mengambil enam nilai, sedangkan matriks 3D membutuhkan 16 (matriks 4×4)! Ini akan menjadi posting yang sangat panjang jika semua detailnya dibahas, jadi jika Anda ingin menjelajahi konsep ini lebih jauh, saya sangat merekomendasikan percobaan matrix3d ​​interaktif ini di Codepen.

matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

Cara Membuat
Animasi dengan Transformasi 3D

Sekarang setelah dasar-dasarnya tercakup, membuat animasi interaktif adalah langkah selanjutnya. Menggunakan transformasi dan transisi CSS3, elemen berubah dari satu status ke status lainnya dengan memutar, menskalakan, atau menambahkan perspektif.

Jika Anda baru mengenal animasi CSS, penting untuk mengetahui bahwa tanpa transisi, elemen yang diubah akan berubah tiba-tiba dari satu keadaan ke keadaan lainnya. Untuk mencegah hal ini, sebuah transisi dapat ditambahkan sehingga Anda dapat mengontrol perubahan tersebut, memberikan tampilan yang lebih halus.

Cara Membuat Flip Kartu

Siapa yang tidak suka bermain kartu? Contoh ini menampilkan kartu dua sisi dan Anda dapat melihat kedua sisi dengan membalikkannya dengan transformasi. Jika Anda melihat tag body , banyak efek yang berasal dari properti perspective . Ini diatur menjadi 500px. Nilai yang lebih rendah seperti 100px terlihat sangat "miring".

Ini adalah HTML awal:

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

CSS inilah yang membuatnya terjadi:

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

Ini dapat ditemukan di Codepen.

Jika Anda baru mengenal transformasi, ini mungkin menarik bagi Anda: transform: rotate(1turn); Unit ini sangat cocok untuk kartu kami karena unit "belok" persis seperti namanya, yaitu satu lingkaran penuh.

Saya juga menggunakan beberapa easing untuk membuat cara pemintalan khusus. Hal ini dicapai dengan transition: all 1s ease-in; .

Properti 3D lain dalam cuplikan adalah transform-style: preserve-3d; . Dengan memasukkan ini, ini memungkinkan elemen untuk "berayun" di ruang tiga dimensi daripada tetap berada di elemen induk.

Cara Membuat Teks Dengan Efek 3D

Contoh ini terinspirasi dari poster film lama. Ada begitu banyak tipografi berbeda di luar sana yang dapat memanfaatkan gaya CSS yang hebat, jadi efek tipe yang unik pasti dimungkinkan. Teks ini menggunakan rotate3d dan transform3d untuk memberikan transformasi yang unik.

HTML-nya cukup sederhana:

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

Berikut adalah CSS dasar:

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

CSS dan contoh yang lebih rinci dapat ditemukan di Codepen.

Semoga transformasi 3D CSS membawa dimensi baru pada desain Anda. Memanfaatkan perspektif adalah cara yang bagus untuk membuat elemen terlihat lebih dimensional. Dikombinasikan dengan transisi, ada banyak kemungkinan saat membuat animasi.