A Look Into Transformation 2D CSS3
The Modul transformasi adalah tambahan yang luar biasa dalam CSS3, ia mengambil cara kita memanipulasi unsur-unsur di laman web ke peringkat seterusnya.
Terdapat beberapa eksperimen yang sangat menggembirakan saya, contohnya seperti ini. Walau bagaimanapun, kami tidak akan membina sesuatu seperti ikon CSS sahaja yang entah bagaimana boleh diubah menjadi Autobot, kerana ia mungkin sangat menggalakkan dan tidak dapat digunakan dalam kehidupan sebenar juga.
Sebaliknya, kali ini, kami akan melangkah mundur dan mengkaji semula asas-asas Transformasi CSS3 2D untuk melihat bagaimana ia berfungsi pada tahap asas.
Sintaks
Modul Transformasi CSS3 pada dasarnya membolehkan kita untuk mengubah elemen ke tahap tertentu seperti menerjemahkan, menaikkan, memutar dan mencondongkan.
Sintaks rasmi ialah mengubah: kaedah (nilai). Bagaimanapun, seperti penambahan hebat CSS3 lain yang masih dalam peringkat awal, penyemak imbas semasa masih memerlukan versi sintaks untuk menjalankan transformasi. Oleh itu, sintaks lengkap akan berubah seperti ini:
mengubah: kaedah (nilai); / * Syntax Rasmi W3C * / -o-transform: kaedah (nilai); / * Opera 10.5+ * / -ms-transform: kaedah (nilai); / * Internet Explorer 9.0+ * / -moz-transform: kaedah (nilai); / * Firefox 3.6+ * / -webkit-transform: kaedah (nilai); / * Chrome / Safari 3.2+ * /
Juga, kaedah yang kita rujuk di atas adalah mengubah fungsi, yang boleh digantikan dengan salah satu daripada yang berikut: menterjemah (), skala (), putar () atau condong ().
Nilai
Kebanyakan nilai kaedah akan bersesuaian dengan Paksi X dan Paksi Y. Sekiranya anda mengingati sistem koordinat Cartesian dari kelas Matematik anda di Sekolah Menengah, asas asasnya agak sama, paksi X mewakili mendatar garis dan paksi Y mewakili menegak talian.
Kecuali untuk putaran. The putaran akan menggunakan koordinat kutub yang dinyatakan dalam darjah yang berkisar antara 0 hingga 360.
Nilai untuk semua kaedah boleh menjadi negatif atau positif. Hanya mengambil nota walaupun, sebagai laman web dibaca secara berurutan dari atas ke bawah yang menjadikan paksi Y di web berfungsi bertentangan dengan prinsip asal koordinat Cartesian. Ini bermakna apabila anda menambah nilai negatif kepada Paksi Y, ia akan bergerak ke atas.
Menggunakan Transformasi
Sekarang, mari kita lihat demonstrasi asas berikut untuk melihat Transformasi dalam tindakan.
Saya - Terjemahan
Jangan diliputi oleh istilah ini menterjemah, ia tidak akan menterjemahkan bahasa asing. The menterjemah di sini sebenarnya adalah kaedah untuk menggerakkan elemen dalam beberapa arah.
Kaedah ini mengandungi dua nilai; X dan Y. yang Nilai X seperti yang kita katakan di atas akan mengambil unsur secara mendatar; ke kiri atau ke kanan, Sementara Y nilai akan mengambil secara menegak ke bahagian bawah atau ke atas.
Sekarang, mari lihat beberapa demonstrasi mudah di bawah:
div width: 100px; ketinggian: 100px; ubah: menterjemah (100px, 250px);
Coretan di atas akan menggerakkan elemen untuk 100px ke kanan dan 250px ke bahagian bawah.
div width: 100px; ketinggian: 100px; ubah: menterjemah (100px, 0);
Coretan di atas akan menggerakkan elemen ke kanan untuk 100px, kerana kita tidak menyentuh paksi Y. Kemudian, jika kita mahu memindahkan elemen ke kiri, kita hanya perlu menetapkan paksi X secara negatif, seperti berikut:
div width: 100px; ketinggian: 100px; ubah: menterjemah (-100px, 0);
- Demo "Translate"
Sebagai alternatif, kita dapat memindahkan elemen dalam satu arah dengan kaedah-kaedah individu ini; translateX () dan translateY (), perbezaannya ialah setiap kaedah tersebut hanya menerima satu nilai.
Jadi, secara praktikal, yang ubah: menterjemah (-100px, 0) juga sama dengan mentransformasikan: translateX (-100px).
II - Skala
The skala kaedah membenarkan kami membesarkan atau mengurangkan unsur-unsur dari saiz sebenarnya. Nilai skala adalah sama dengan menterjemah kaedah di atas, ia juga mengandungi X dan Y. Satu-satunya perbezaan ialah kita tidak menentukan unit. Inilah contohnya:
div width: 100px; ketinggian: 100px; mengubah: skala (1.5);
Contoh di atas akan membesarkannya div 1.5 atau 150% saiz sebenarnya, dan kerana kita skala sama untuk kedua-dua arah X dan Y, kita hanya perlu mengisytiharkannya dalam satu nilai. Anda juga boleh mengisytiharkannya dengan cara ini mengubah: skala (1.5,1.5); jika anda mahu pergi lebih terperinci, ia hanya akan melakukan perkara yang sama.
Lebih-lebih lagi, jika kami ingin mengurangkan elemen yang kami gunakan secara khusus daripada 0.999 kepada mutlak 0, seperti contoh di bawah, yang akan mengurangkan saiz div bagi 50% atau separuh:
div width: 100px; ketinggian: 100px; mengubah: skala (0.5);
Tetapi, berhati-hati, jika anda menetapkan nilai menjadi mutlak “0” yang div hanya akan hilang, jadi jika anda tidak mempunyai alasan yang sah untuk melakukannya, saya tidak akan mengesyorkan melakukannya.
- Demo "Skala"
III - Putar
Seperti yang telah kita sebutkan tadi dalam jawatan ini, berputar kaedah menggunakan koordinat kutub, maka nilai tersebut dinyatakan dalam darjah. Berikut adalah dua contoh
Coretan di bawah akan berputar div 30 darjah mengikut arah jam.
div width: 100px; ketinggian: 100px; mengubah: putar (30deg);
Nilai negatif, seperti yang digambarkan dalam contoh di bawah, akan berputar div dalam arah yang bertentangan (berlawanan arah jam) pada tahap yang sama.
div width: 100px; ketinggian: 100px; mengubah: putar (-30deg);
- Demo "Putar"
IV - Skew
The condong kaedah membolehkan kita mencipta sejenis selari. Ia juga mengandungi dua nilai paksi X dan Y. Walau bagaimanapun, nilai itu sendiri dinyatakan dalam ijazah, dan bukannya ukuran linear seperti yang kita gunakan untuk skala atau menterjemah kaedah. Inilah contohnya:
div width: 200px; ketinggian: 100px; mengubah: condong (30deg, 10deg);
- Demo "Skew"
V - Pelbagai kaedah
The ubah harta tidak terhad untuk mengendalikan hanya satu kaedah, sebenarnya kita boleh memasukkan pelbagai kaedah dalam pernyataan tunggal, seperti ini:
div width: 100px; ketinggian: 100px; ubah: translateX (100px) berputar (45deg);
Potongan di atas akan menggerakkan elemen 100px ke kanan dan pada masa yang sama ia juga berputar 45 darjah.
Demo "Multiple Method".
Transform Origin
The transfrom-asal - seperti namanya - digunakan untuk mengawal titik permulaan transformasi. Jika kami tidak mengisytiharkan secara jelas harta ini dengan sintaks yang berikut asal-asalan: X Y;, maka penyemak imbas akan mengambil nilai lalai yang 50% untuk X dan 50% untuk Y.
Sekarang, jika kita tentukan ubah-asal kepada 0 (X) 0 (Y) transformasi akan bermula di sebelah kiri atas.
Sekali lagi, semua pelayar masih memerlukan versi awalan untuk memanggil harta ini. Jadi, di sini adalah versi lengkap untuk memastikan ia berfungsi dalam penyemak imbas yang paling terkini:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transform-asal: X Y; -ms-transform-origin: X Y; asal-asalan: X Y;
- Demo "Transformasi asal"
Kesimpulannya
Kami telah melalui semua empat kaedah transformasi penting; menterjemah, skala, berputar dan condong
Walau bagaimanapun, seperti yang dinyatakan, modul ini masih dalam peringkat awal, jadi jika anda akan menerapkan kaedah ini di laman web seterusnya, pastikan ia merendahkan semangat untuk penyemak imbas yang tidak serasi (saya tidak merujuk kepada IE6 di sini).
Terakhir, anda boleh melihat semua demo atau memuat turun sumber dari pautan berikut.
- Demo
- Muat turun Sumber
