Cara membuat desain 3D dengan properti transformasi CSS3

Ada dua dimensi dalam hal properti transformasi CSS3, 2D dan 3D. Saat menghidupkan, transformasi digunakan untuk membuat elemen berubah dari satu keadaan ke keadaan 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 mengagumkan dengan menggabungkan konsep dasar ini.

Transformasi 3D bisa sangat detail, dan bisa menjadi rumit jika ada banyak bagian yang berbeda digabungkan, jadi memulai dengan blok bangunan dasar akan 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 sumbu z?

Akan ada banyak referensi ke sumbu z. Sangat mudah untuk menganggapnya sebagai jarak pengukuran sesuatu 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 mengambil argumen untuk x,y, dan z. Properti skala mengambil nilai untuk sudut dan perspektif juga mengambil nilai tunggal.

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 di sepanjang sumbu yang benar.

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

Berikut adalah 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 ia bergerak di setiap arah.

Fungsi 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.

Berikut contoh translate3d :

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

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

Properti perspektif telah ditambahkan ke contoh ini.

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, nilainya harus dalam derajat. Metode rotateX() memutar elemen di sekitar sumbu x pada derajat tertentu. Lihat bagaimana persegi panjang lebih pendek? Itu 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 bagian bawah tidak selebar bagian atas? Diputar sehingga tidak tampak 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 dicatat 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-dasarnya

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 paling "dimensi". Di sinilah Anda benar-benar akan mendapatkan perspektif. Jika Anda menerapkan transformasi 3D ke elemen tanpa mengatur perspektif, efek yang dihasilkan tidak akan muncul sebagai tiga dimensi. Ini adalah sesuatu yang dapat ditambahkan ke properti di atas juga.

Cara menggunakan transisi dan transformasi CSS3 untuk membuat animasi

Animasi yang menarik dapat dibuat dengan CSS3 dengan menggunakan transformasi dan transisi. Transform digunakan untuk membuat suatu elemen berubah dari satu state ke state lainnya. Contohnya akan berputar, bergerak, miring ...

Untuk mengaktifkan ruang 3D, sebuah elemen membutuhkan perspektif. Ini dapat diterapkan dalam 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. Pikirkan nilai rendah sebagai sesuatu yang benar-benar terlihat, seperti bagaimana rasanya ketika Anda melihat objek besar. Ketika ada nilai yang lebih besar, efeknya kurang intens.

Posisi titik hilang juga dapat disesuaikan. Perlu disebutkan, dan banyak eksperimen, karena 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% .

Contoh di sebelah kiri diatur ke sekitar 800px. Perspektif di sisi kanan jauh lebih drastis, disetel ke 200px.

Skala

skalaZ()

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

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

Contoh di sebelah kiri memiliki nilai 2 dan contoh di sebelah kanan memiliki nilai 8.

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 */

Matriks3d()

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

Berikut adalah outline dasar dari matrix3d: 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 diketahui bahwa tanpa transisi, elemen yang ditransformasi akan berubah secara tiba-tiba dari satu status ke status lainnya. Untuk mencegah hal ini, transisi dapat ditambahkan sehingga Anda dapat mengontrol perubahan, 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 sisinya dengan membaliknya 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".

Berikut adalah HTML awal:

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

CSS adalah apa 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 terlihat menarik bagi Anda: transform: rotate(1turn); Unit ini sangat cocok untuk kartu kami karena unit "putaran" persis seperti yang terdengar, yaitu satu lingkaran penuh.

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

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

Cara membuat teks dengan efek 3D

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

HTMLnya 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.