A Look Into CSS3 2D Transformations
Itu Modul transformasi adalah tambahan yang luar biasa dalam CSS3, dibutuhkan cara kita memanipulasi elemen di situs web ke tingkat berikutnya.
Ada beberapa eksperimen yang benar-benar memukau saya, contohnya seperti ini. Namun, kami tidak akan membangun sesuatu seperti ikon hanya CSS yang entah bagaimana dapat berubah menjadi Autobot, karena mungkin berlebihan dan tidak dapat digunakan dalam kehidupan nyata juga.
Sebagai gantinya, kali ini, kami akan melangkah mundur dan meninjau dasar-dasar Transformasi 2D CSS3 untuk melihat cara kerjanya pada tingkat dasar.
Sintaksnya
Modul Transformasi CSS3 pada dasarnya memungkinkan kita untuk mengubah elemen ke tingkat tertentu seperti menerjemahkan, penskalaan, memutar dan memiringkan.
Sintaks resmi adalah transform: metode (nilai). Namun, seperti penambahan besar CSS3 lainnya yang masih dalam tahap awal, browser saat ini masih membutuhkan versi sintaks untuk menjalankan transformasi. Jadi, sintaksis lengkapnya akan berubah seperti ini:
transform: metode (nilai); / * Sintaks Resmi W3C * / -o-transform: metode (nilai); / * Opera 10.5+ * / -ms-transform: method (value); / * Internet Explorer 9.0+ * / -moz-transform: metode (nilai); / * Firefox 3.6+ * / -webkit-transform: method (value); / * Chrome / Safari 3.2+ * /
Juga, metode yang kami maksudkan di atas adalah mengubah fungsi, yang dapat diganti dengan salah satu dari yang berikut: menterjemahkan(), skala(), memutar() atau condong().
Nilai
Sebagian besar nilai metode akan sesuai dengan Sumbu X dan Sumbu Y. Jika Anda ingat sistem koordinat Cartesian dari kelas Matematika Anda di SMA, prinsip dasarnya sangat mirip, sumbu X mewakili horisontal garis dan sumbu Y mewakili vertikal baris.
Kecuali untuk rotasi. Itu rotasi akan menggunakan koordinat kutub yang dinyatakan dalam derajat yang berkisar dari 0 hingga 360.
Nilai untuk semua metode bisa negatif atau positif. Catat saja, karena halaman web dibaca berurutan dari atas ke bawah yang membuat sumbu Y di web bekerja berlawanan dengan prinsip asli koordinat Cartesius. Ini berarti bahwa ketika Anda menambahkan nilai negatif ke Sumbu Y, itu akan pindah ke atas sebagai gantinya.
Menggunakan Transformasi
Sekarang, mari kita lihat demonstrasi dasar berikut untuk melihat Transformasi sedang beraksi.
Aku menterjemahkan
Jangan dikaburkan dengan istilah itu menterjemahkan, itu tidak akan menerjemahkan bahasa asing. Itu menterjemahkan di sini sebenarnya adalah metode untuk memindahkan elemen ke beberapa arah.
Metode ini mengandung dua nilai; X dan Y. itu Nilai X seperti yang kami tunjukkan di atas akan mengambil elemen secara horizontal; ke kiri atau ke kanan, selagi Y nilai akan membawanya secara vertikal ke bagian bawah atau ke atas.
Sekarang, mari kita lihat beberapa demonstrasi sederhana di bawah ini:
div width: 100px; tinggi: 100px; transform: translate (100px, 250px);
Cuplikan di atas akan memindahkan elemen untuk 100px ke kanan dan 250px ke bawah.
div width: 100px; tinggi: 100px; transform: translate (100px, 0);
Cuplikan di atas akan memindahkan elemen tepat ke kanan untuk 100px, karena kita memusatkan sumbu Y. Kemudian, jika kita ingin memindahkan elemen ke kiri, kita hanya perlu mengatur sumbu X dalam negatif, sebagai berikut:
div width: 100px; tinggi: 100px; transform: translate (-100px, 0);
- Demo "Terjemahkan"
Sebagai alternatif, kami dapat memindahkan elemen dalam satu arah dengan metode individual ini; translateX () dan menerjemahkan Y (), perbedaannya adalah masing-masing metode hanya menerima satu nilai.
Jadi, secara praktis, itu transform: translate (-100px, 0) juga sama dengan transform: translateX (-100px).
Skala II
Itu skala Metode memungkinkan kita untuk memperbesar atau memperkecil elemen dari ukuran sebenarnya. Nilai skala sama dengan menterjemahkan metode di atas, itu juga berisi X dan Y. Satu-satunya perbedaan adalah kita tidak menentukan unit. Berikut ini sebuah contoh:
div width: 100px; tinggi: 100px; transform: skala (1,5);
Contoh di atas akan memperbesar div 1,5 atau 150% ukuran sebenarnya, dan karena kita skala secara merata untuk arah X dan Y, kita hanya perlu mendeklarasikannya dalam satu nilai. Anda juga dapat mendeklarasikannya dengan cara ini transform: skala (1,5,1.5); jika Anda ingin lebih detail, itu hanya akan melakukan hal yang sama.
Selain itu, jika kita ingin mengurangi elemen, kita akan secara khusus menggunakan nilai dari 0,999 hingga absolut 0, seperti contoh di bawah ini, yang akan mengurangi ukuran div hingga 50% atau setengah:
div width: 100px; tinggi: 100px; transform: skala (0,5);
Tapi, berhati-hatilah, jika Anda menetapkan nilai menjadi absolut “0” itu div hanya akan hilang, jadi kecuali Anda memiliki alasan yang sah untuk melakukannya, saya tidak akan merekomendasikan melakukannya.
- Demo "Skala"
III - Putar
Seperti yang kami sebutkan sebelumnya di posting ini, the memutar Metode menggunakan koordinat kutub, sehingga nilainya dinyatakan dalam derajat. Berikut ini dua contoh
Cuplikan di bawah ini akan memutar div 30 derajat searah jarum jam.
div width: 100px; tinggi: 100px; transform: rotate (30deg);
Nilai negatif, seperti yang diilustrasikan dalam contoh di bawah ini, akan memutar div dalam arah yang berlawanan (berlawanan arah jarum jam) pada tingkat yang sama.
div width: 100px; tinggi: 100px; transform: rotate (-30deg);
- Demo "Putar"
IV - Miring
Itu condong Metode memungkinkan kita untuk membuat semacam jajaran genjang. Ini juga mengandung dua nilai sumbu X dan Y. Namun, nilai itu sendiri dinyatakan dalam derajat, bukan pengukuran linier seperti yang kami gunakan untuk skala atau menterjemahkan metode. Berikut ini sebuah contoh:
div width: 200px; tinggi: 100px; transform: condong (30deg, 10deg);
- Demo "Miring"
V - Beberapa metode
Itu mengubah properti tidak terbatas hanya menangani satu metode, bahkan kita dapat memasukkan beberapa metode dalam deklarasi tunggal, seperti ini:
div width: 100px; tinggi: 100px; transform: translateX (100px) rotate (45deg);
Cuplikan di atas akan memindahkan elemen 100px ke kanan dan pada saat yang sama juga berputar 45 derajat.
Demo "Beberapa Metode".
Ubah Asal
Itu asal-usul transfrom - seperti namanya - digunakan untuk mengontrol titik awal transformasi. Jika kami tidak secara eksplisit mendeklarasikan properti ini dengan sintaks berikut transform-origin: X Y;, maka browser akan mengambil nilai default yaitu 50% untuk X dan 50% untuk Y.
Sekarang, jika kita tentukan asal-usul ke 0 (X) 0 (Y) transformasi akan dimulai dari kiri atas.
Sekali lagi, semua browser masih memerlukan versi awalan untuk memanggil properti ini. Jadi, ini adalah versi lengkap untuk memastikannya berfungsi di sebagian besar browser saat ini:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transform-origin: X Y; -ms-transform-origin: X Y; transform-origin: X Y;
- Demo "Transform-origin"
Kesimpulan
Kami telah melalui keempat metode transformasi esensial; menerjemahkan, skala, memutar, dan condong
Namun, seperti yang disebutkan, modul ini masih dalam tahap awal, jadi jika Anda akan menerapkan metode ini di situs web Anda berikutnya, pastikan itu terdegradasi dengan anggun untuk browser yang tidak kompatibel (saya tidak merujuk ke IE6 di sini).
Terakhir, Anda dapat melihat semua demo atau mengunduh sumber dari tautan berikut.
- Demo
- Sumber Unduhan
