Setelah sebelumnya telah belajar membahas tentang Belajar CSS3 - Transformasi 2D, kali ini kita akan coba untuk membahas belajar css3 - Transformasi 3D.
CSS3 Mentransformasi
Sementara transformasi 2D adalah fitur keren untuk memiliki, mereka tidak benar-benar memberikan banyak tambahan untuk kita orang web. Paling-paling, mereka menyelamatkan kita dari menulis beberapa baris Javascript; tetapi mereka tidak benar-benar memberikan pengalaman baru bagi pengguna. Untungnya kita tidak bisa mengatakan hal yang sama untuk transformasi 3D. 3D mengubah memungkinkan kita pengembang web untuk membuat objek pada halaman yang muncul untuk menjadi 3 dimensi. Flash, hari-hari Anda sekarang nomor!
dukungan browser selalu menjadi perhatian di semua pikiran kita. Sama seperti mengubah 2D, transformasi 3D juga dipelopori oleh Apple dan Safari pada desktop serta seluler (Mobile Safari untuk iOS) sepenuhnya mendukung itu. WebKit sepupu Safari, Chrome mulai mendukungnya beberapa waktu lalu dan begitu pula Mozilla dan Opera.
Perspektif
Perspektif adalah mungkin konsep yang paling penting dan properti di CSS ketika datang ke ruang 3D. Ketika mata manusia melihat adegan, benda-benda di kejauhan tampak lebih kecil daripada yang dekat - ini dikenal sebagai perspektif. Dalam rangka untuk mewakili citra 3D di 2D, trik yang digunakan adalah dengan membuat garis paralel yang pergi dari pengguna menggabungkan menuju titik, yang dikenal sebagai titik hilang. Garis yang sebenarnya tidak sejajar memberikan pengguna rasa mendalam.
Dalam CSS3, ada dua cara untuk mengatur perspektif elemen. Pengaturannya dengan properti perspektif set untuk elemen tersebut serta anak-anaknya. Pengaturan sebagai atribut dari transformasi properti akan mengaturnya hanya untuk transformasi tertentu. Berikut adalah contoh dari kedua metode.
Berikut adalah kode yang digunakan untuk screenshot di atas.
#green {
background: green;
Transformasi: Perspektif (200px) rotateY (45deg);
}
#Abu-abu {
perspektif: 200px;
}
#grey angka {
background: abu-abu;
transform: rotateY (45deg);
}
Secara default, titik hilang diposisikan ke pusat elemen yang memiliki properti perspektif. Anda dapat mengubahnya dengan properti perspektif-asal.
-webkit-perspektif-asal: 60% 40%;
3D Transform fungsi
Dengan pemahaman tentang perspektif dan dua transformasi dimensi di CSS3, tiga dimensi transformasi cukup sederhana untuk memahami. Setelah perspektif diatur, seperti transformasi 2D, kita juga bisa mengatur transformasi untuk dimensi Z (ketiga). Berikut adalah fungsi yang bisa digunakan:
rotateX (angle), rotateY (angle), rotateZ (angle)
translateX (px), translateY (px), translateZ (px)
Berikut adalah bagaimana fungsi di atas membuat dalam browser:
.container {
width: 150px;
height: 150px;
perspektif: 600px;
}
# Rotate-x .panel {transform: rotateX (45deg); }
# Rotate-y .panel {transform: rotateY (45deg); }
# Rotate-z .panel {transform: rotateZ (45deg); }
# Menerjemahkan-x .panel {transform: translateX (30px); }
# Menerjemahkan-y .panel {transform: translateY (30px); }
# Menerjemahkan-z .panel {transform: translateZ (50px); }
Catatan: Dalam kedua contoh di atas, saya hanya tentukan transformasi atau perspektif properti utama. Dalam implementasi nyata, Anda akan perlu menambahkan sifat tertentu (-webkit-transform, dll).
