Cara menggunakan fungsi transformasi 2D dalam CSS

petikan dari buku baru Tiffany "CSS Master, Edisi Kedua"

Ciri transformasi CSS memberi kita keupayaan untuk membuat kesan dan interaksi yang tidak dapat dicapai oleh kaedah lain. Menggabungkan peralihan dan animasi, kita boleh membuat unsur -unsur dan antara muka yang berputar, menari dan skala. Terutama transformasi tiga dimensi, ia boleh mensimulasikan objek fizikal. Artikel ini akan meneroka fungsi transformasi dua dimensi (fungsi tiga dimensi diperkenalkan di sini).

Terdapat empat jenis fungsi transformasi dua dimensi: putaran, skala, kecondongan dan anjakan. Enam fungsi lain membolehkan kita mengubah unsur -unsur di sepanjang satu dimensi: Scalex dan Scaley;

mata utama

Empat fungsi transformasi dua dimensi utama dalam CSS berputar, skala, condong, dan diterjemahkan. Fungsi -fungsi ini membolehkan kita membuat kesan dan interaksi yang tidak dapat dicapai oleh kaedah lain, termasuk unsur -unsur dan antara muka yang berputar, menari, dan skala.

Fungsi berputar () berputar () berputar elemen pada sudut yang ditentukan di sekitar asal transformasi. Boleh diputar mengikut arah jam atau berlawanan arah jam. Fungsi skala boleh meningkatkan atau mengurangkan saiz elemen dalam dimensi x, dimensi y, atau kedua -duanya. Fungsi terjemahan adalah jarak antara kedudukan lukisan elemen dan kedudukan susun aturnya dengan jarak yang ditentukan.
Transformasi fungsi boleh digabungkan untuk mewujudkan transformasi yang lebih kompleks. Walau bagaimanapun, urutan di mana fungsi -fungsi ini digunakan adalah penting kerana ia mengubah hasilnya dengan ketara. Ini kerana penyemak imbas mendarabkan matriks setiap fungsi dengan membuat matriks baru.
Versi terbaru spesifikasi transformasi CSS menambah diterjemahkan, berputar dan atribut skala kepada CSS. Ciri-ciri ini berfungsi dengan sangat sama dengan fungsi transformasi mereka yang sepadan, tetapi nilai-nilai itu dipisahkan ruang dan bukannya dipisahkan koma. Ini membolehkan putaran, terjemahan, atau transformasi skala untuk diuruskan secara individu dari transformasi lain. Walau bagaimanapun, sokongan penyemak imbas untuk sifat -sifat ini masih terhad.
• berputar ()

Transformasi putaran berputar unsur-unsur di sekitar asal transformasi pada sudut yang ditentukan. Gunakan berputar () ke elemen kecondongan mengikut arah jam (nilai sudut positif) atau lawan jam (nilai sudut negatif). Kesannya sama seperti kincir angin atau roda angin, seperti yang ditunjukkan di bawah.

Fungsi

berputar () menerima nilai unit sudut. Unit sudut ditakrifkan oleh nilai CSS dan tahap modul unit 3. Ini mungkin deg (ijazah), rad (radian), grad (kecerunan), atau unit giliran. Putaran penuh adalah sama dengan 360deg, 6.28Rad, 400grad atau 1turn.

Kecuali animasi atau peralihan, nilai putaran melebihi satu putaran (mis., 540Deg atau 1.5 giliran) akan diberikan berdasarkan nilai yang tinggal. Dalam erti kata lain, kesan rendering 540deg adalah sama dengan 180deg (540 darjah tolak 360 darjah), dan kesan rendering sebanyak 1.5 giliran adalah sama dengan .5 giliran (1.5 - 1). Walau bagaimanapun, peralihan atau animasi dari 0DEG hingga 540DEG atau dari 1 giliran hingga 1.5 giliran akan memutar elemen satu setengah kali.

fungsi skala dua dimensi: Skala, Scalex dan Scaley

Menggunakan fungsi skala, kita boleh meningkatkan atau mengurangkan saiz rendering elemen pada dimensi x (Scalex), Y dimensi (scaley), atau kedua -duanya (skala). Skala ditunjukkan dalam angka di bawah, di mana sempadan mewakili sempadan asal kotak dan nombor menunjukkan titik tengahnya.

Setiap fungsi skala menerima pengganda atau faktor sebagai parameternya. Pengganda ini boleh menjadi hampir mana -mana nombor positif atau negatif. Nilai peratusan tidak disokong. Pengganda positif lebih besar daripada 1 meningkatkan saiz elemen. Sebagai contoh, skala (1.5) meningkatkan saiz elemen dalam arah x dan y sebanyak 1.5 kali. Pengganda positif antara 0 dan 1 akan mengurangkan saiz elemen.

Nilai kurang daripada 0 juga akan menyebabkan saiz elemen skala atau mengurangkan dan membuat transformasi reflektif (flip).

AMARAN: Menggunakan skala (0) akan menyebabkan elemen hilang kerana hasil mengalikan nombor dengan sifar adalah sifar.

Buat transformasi identiti menggunakan skala (1), yang bermaksud ia ditarik ke skrin seolah -olah tiada transformasi skala digunakan. Menggunakan skala (-1) tidak akan mengubah saiz cabutan elemen, tetapi nilai negatif akan menyebabkan elemen dapat dicerminkan. Walaupun elemen tidak memaparkan transformasi, ia masih mencetuskan konteks penyusunan baru dan termasuk blok.

Anda boleh menggunakan fungsi skala untuk skala dimensi x dan y masing -masing. Hanya lulus dua parameter: skala (1.5, 2). Parameter pertama skala dimensi x; Sebagai contoh, kita boleh menggunakan skala (-1, 1) untuk mencerminkan objek secara individu di sepanjang paksi-x. Melewati parameter tunggal akan skala dua dimensi dengan faktor yang sama.

Fungsi Terjemahan Dua Dimensi: Translatex, Translatey and Translate

Elemen terjemahan mengimbangi jarak antara kedudukan lukisan dan kedudukan susun aturnya dengan jarak tertentu. Seperti transformasi lain, elemen terjemahan tidak mengubah kedudukan OffsetLeft atau offsettop. Walau bagaimanapun, ia mempengaruhi kedudukan visualnya pada skrin.

setiap fungsi terjemahan dua dimensi (translatex, translate, dan translate) menerima panjang atau peratusan sebagai parameter. Unit panjang termasuk piksel (PX), EM, REM, dan unit Viewport (VW dan VH).

Fungsi TranslateX mengubah kedudukan rendering mendatar elemen. Jika elemen adalah 0 piksel dari kiri, Transform: TransitionX (50px) menggerakkan kedudukan renderingnya 50 piksel di sebelah kanan kedudukan permulaannya. Begitu juga, Translatey mengubah kedudukan rendering menegak elemen. Peralihan (50px) mengalihkan elemen secara menegak dengan 50 piksel.

Menggunakan Terjemahan () Kita boleh memindahkan unsur secara menegak dan mendatar menggunakan fungsi tunggal. Ia menerima sehingga dua parameter: nilai terjemahan x dan nilai terjemahan y. Angka di bawah menunjukkan kesan elemen dengan nilai transformasi (120%, -50px), di mana dataran hijau di sebelah kiri berada di kedudukan asalnya, dan dataran hijau di sebelah kanan diterjemahkan secara mendatar sebanyak 120% dengan elemennya (sempadan putus -putus) dan diterjemahkan secara menegak oleh -50px.

Lulus parameter tunggal untuk diterjemahkan bersamaan dengan menggunakan translatex; Menggunakan Terjemahan () adalah pilihan yang lebih ringkas. Penggunaan Terjemahan (100px, 200px) bersamaan dengan TranslateX (100px) Translate (200px).

Nilai terjemahan positif menggerakkan elemen ke kanan (untuk translatex) atau ke bawah (untuk translate). Nilai negatif menggerakkan elemen ke kiri (TranslateX) atau UP (Translate).

panning amat berguna untuk memindahkan item ke kiri, kanan, naik, atau turun. Mengemas kini nilai -nilai atribut kiri, kanan, atas, dan bawah memaksa penyemak imbas untuk mengira semula maklumat susun atur keseluruhan dokumen. Walau bagaimanapun, transformasi dikira selepas susun atur dikira. Mereka mempengaruhi lokasi paparan elemen pada skrin, tetapi bukan saiznya yang sebenarnya. Ya, pelik untuk memikirkan susun atur dokumen dan memberikan konsep yang berasingan, tetapi dari segi penyemak imbas, mereka memang terpisah. Transform Properties mungkin muncul dalam penyemak imbas berhampiran anda

Versi terbaru spesifikasi transformasi CSS menambah diterjemahkan, berputar dan atribut skala

ke CSS. Transformasi sifat berfungsi dengan sangat sama dengan fungsi transformasi mereka yang sepadan, tetapi nilai-nilai yang dipisahkan ruang dan bukannya dipisahkan koma. Sebagai contoh, kita dapat menyatakan transformasi: berputar3d (1, 1, 1, 45deg): berputar: 1 1 1 45deg. Begitu juga, diterjemahkan: 15% 10% 300px secara visual sama seperti Transform: Translate3D (15%, 10%, 300px), dan Skala: 1.5 1.5 3 adalah sama seperti Transform: Scale3D (1.5, 1.5, 3). Menggunakan sifat -sifat ini, kita boleh menguruskan putaran, terjemahan, atau transformasi skala secara individu, bukannya yang lain.

Pada masa penulisan, sokongan penyemak imbas untuk Transform Properties masih sangat jarang. Chrome dan Samsung Internet menyokong mereka keluar dari kotak. Dalam Firefox 60 dan kemudian, sokongan tersembunyi di belakang bendera;

Skew, Skewx dan Skewy

Transformasi kecondongan mengubah sudut dan jarak antara titik sambil mengekalkannya di atas kapal terbang yang sama. Transformasi incline juga dipanggil

transformasi ricih

, dan mereka memutarbelitkan bentuk elemen seperti yang ditunjukkan di bawah, di mana garis putus -putus mewakili kotak terikat asal elemen.

Fungsi kecondongan (skew, skewx, dan skewy) menerima kebanyakan unit sudut sebagai parameter. Ijazah, kecerunan, dan radian adalah unit sudut berkesan untuk fungsi kecondongan, manakala unit giliran (mungkin jelas) tidak.

fungsi Skewx memotong elemen dalam arah x atau arah mendatar (lihat angka di bawah). Ia menerima parameter yang mesti menjadi unit sudut. Nilai positif menggerakkan elemen ke kiri, dan nilai negatif menggerakkan elemen ke kanan.

Begitu juga, skewy memotong unsur -unsur dalam arah y atau arah menegak. Angka berikut menunjukkan kesan transformasi: Skewy (30deg). Titik di sebelah kanan asal akan bergerak ke bawah apabila nilai positif meningkat. Nilai negatif bergerak ke atas.

Ini membawa kepada fungsi condong. Fungsi condong memerlukan satu parameter, tetapi boleh menerima sehingga dua parameter. Parameter pertama memiringkan elemen dalam arah x, dan parameter kedua memiringkan elemen dalam arah y. Jika hanya satu parameter disediakan, nilai kedua diandaikan sifar, menjadikannya bersamaan dengan condong hanya dalam arah x. Dalam erti kata lain, kesan rendering condong (45deg) adalah sama dengan Skewx (45deg).

matriks transformasi semasa

Setakat ini, kami telah membincangkan fungsi transformasi secara berasingan, tetapi mereka juga boleh digabungkan. Mahu skala dan memutar objek? Tiada masalah: Gunakan senarai Transform. Contohnya:

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

Ini menghasilkan hasil yang ditunjukkan di bawah.

Urutan

adalah penting apabila menggunakan fungsi Transform. Ini digambarkan paling baik oleh ilustrasi, jadi mari kita lihat contoh. CSS berikut akan memiringkan dan memutar elemen:

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

Ia memberikan hasil seperti yang ditunjukkan di bawah.

Apa yang berlaku jika anda memutar elemen terlebih dahulu dan kemudian condongkannya?

<code>.transformEl {
    transform:  rotate(45deg) skew(10deg, 15deg);
}</code>

Kesan (seperti yang ditunjukkan di bawah) sangat berbeza.

Setiap transformasi mempunyai matriks transformasi semasa yang berbeza , yang dibuat dalam susunan fungsi transformasinya. Untuk memahami sepenuhnya sebab -sebabnya, kita perlu mempelajari beberapa pendaraban matriks . Ini juga membantu kita memahami fungsi Matrix dan Matrix3D. fungsi pendaraban matriks dan matriks

Matriks adalah pelbagai nombor atau ungkapan yang diatur dalam baris dan lajur segi empat tepat. Semua transformasi boleh diwakili menggunakan matriks 4 × 4 seperti yang ditunjukkan di bawah.

Matriks ini sepadan dengan fungsi Matrix3D, yang menerima 16 parameter, setiap parameter sepadan dengan nilai matriks 4 × 4. Transformasi dua dimensi juga boleh diwakili menggunakan matriks 3 × 3, seperti yang ditunjukkan di bawah.

Matriks 3 × 3 ini sepadan dengan fungsi transformasi matriks. Fungsi matriks () menerima enam parameter, masing -masing sepadan dengan nilai

a to f .

Setiap fungsi transformasi boleh diterangkan menggunakan fungsi matriks dan matriks atau matriks3D. Angka di bawah menunjukkan matriks 4 × 4 fungsi skala3d, di mana sx , sy dan sz adalah faktor skala X, Y, dan Z Dimensi, masing -masing.

Apabila kita menggabungkan transformasi (contohnya, Transform: Skala (2) Terjemahan (30px, 50px)), pelayar mengalikan matriks setiap fungsi dengan membuat matriks baru. Matriks baru ini adalah matriks yang digunakan untuk elemen.

tetapi pendaraban matriks adalah seperti ini: ia tidak boleh ditukar ganti. Untuk nilai mudah, produk 3 × 2 adalah sama dengan produk 2 × 3. Walau bagaimanapun, untuk matriks, produk

A

× b tidak semestinya sama dengan produk b × a . Mari kita lihat contoh. Kami akan mengira produk matriks transformasi: skala (2) Terjemahan (30px, 50px).

Unsur -unsur kami telah ditingkatkan dua kali sebagai skala, kemudian diterjemahkan 60 piksel secara mendatar dan 100 piksel secara menegak. Kita juga boleh menggunakan fungsi matriks untuk mewakili produk ini: Transform: Matriks (2, 0, 0, 2, 60, 100). Sekarang mari kita menukar susunan transformasi ini, iaitu transformasi: Terjemahan (30px, 50px) skala (2). Hasilnya ditunjukkan di bawah.

Perhatikan bahawa objek kami masih berskala dua kali sebagai skala, tetapi di sini ia melintang secara mendatar sebanyak 30 piksel dan secara menegak oleh 50 piksel. Menggunakan fungsi matriks, ini berubah: matriks (2, 0, 0, 2, 30, 50).

Ia juga perlu diperhatikan bahawa fungsi transformasi yang diwarisi adalah serupa dengan senarai transformasi. Setiap transformasi kanak -kanak didarabkan oleh sebarang transformasi yang digunakan untuk ibu bapa. Sebagai contoh, pertimbangkan kod berikut:

Ini adalah kesan rendering yang sama seperti yang berikut:

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

Dalam kedua -dua kes, matriks transformasi semasa elemen P adalah sama. Walaupun kami telah memberi tumpuan kepada transformasi dua dimensi setakat ini, di atas juga terpakai kepada transformasi tiga dimensi. Dimensi ketiga menambah ilusi kedalaman. Ia juga membawa beberapa kerumitan tambahan dalam bentuk fungsi dan sifat baru.

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

soalan yang sering ditanya mengenai fungsi transformasi dua dimensi dalam CSS

Apakah pelbagai jenis fungsi transformasi dua dimensi dalam CSS?

Terdapat banyak jenis fungsi transformasi dua dimensi dalam CSS. Ini termasuk terjemahan (), berputar (), skala (), condong (), dan matriks (). Setiap fungsi membolehkan anda memanipulasi elemen dengan cara yang berbeza. Sebagai contoh, fungsi Terjemahan () menggerakkan elemen dari kedudukan semasa, manakala fungsi berputar () berputar elemen di sekitar titik tertentu. Fungsi skala () mengubah saiz elemen, dan fungsi condong () memutar elemen di sepanjang paksi-x dan paksi-y. Fungsi matriks () menggabungkan semua transformasi ini menjadi satu.

Bagaimana menggunakan fungsi Terjemahan () dalam CSS?

Fungsi Terjemahan () dalam CSS digunakan untuk memindahkan elemen dari kedudukan semasa. Ia mempunyai dua parameter: nilai paksi x dan nilai paksi y. Sebagai contoh, jika anda ingin memindahkan elemen 50 piksel ke kanan dan 20 piksel ke bawah, anda boleh menggunakan kod berikut: Transform: Terjemahan (50px, 20px);. Ini akan memindahkan elemen ke lokasi baru tanpa menjejaskan susun atur elemen lain pada halaman.

Bolehkah saya menggabungkan pelbagai fungsi transformasi 2D dalam CSS?

Ya, anda boleh menggabungkan pelbagai fungsi transformasi 2D dalam CSS. Untuk melakukan ini, hanya senaraikan setiap fungsi dalam Transform Property dan memisahkannya dengan ruang. Sebagai contoh, jika anda ingin skala elemen kepada dua kali saiznya dan kemudian putar 45 darjah, anda boleh menggunakan kod berikut: Transform: Skala (2) Putar (45Deg);. Transformasi digunakan dalam pesanan yang disenaraikan.

Apakah tujuan fungsi matriks () dalam CSS?

fungsi matriks () dalam CSS adalah fungsi transformasi yang sangat kuat yang membolehkan anda melakukan pelbagai transformasi pada masa yang sama. Ia mempunyai enam parameter yang mewakili nilai matriks 2 × 3. Matriks ini digunakan untuk melakukan kombinasi skala, putaran, kecondongan, dan transformasi terjemahan. Walaupun ia lebih kompleks daripada fungsi transformasi lain, ia memberikan tahap kawalan yang tinggi ke atas proses transformasi.

Bagaimanakah fungsi condong () berfungsi dalam CSS?

fungsi condong () dalam CSS digunakan untuk memutar unsur-unsur sepanjang paksi-x dan paksi-y. Ia mempunyai dua parameter: sudut kecenderungan paksi x dan sudut kecenderungan paksi y. Sebagai contoh, jika anda ingin memiringkan elemen 30 darjah di sepanjang paksi x dan 20 darjah di sepanjang paksi y, anda boleh menggunakan kod berikut: Transform: Skew (30deg, 20deg);. Ini akan memesongkan elemen, mewujudkan kesan kecondongan.

Bolehkah saya menggunakan fungsi transformasi 2D untuk mana -mana elemen HTML dalam CSS?

Ya, anda boleh menggunakan fungsi transformasi 2D untuk mana -mana elemen HTML dalam CSS. Ini termasuk unsur-unsur peringkat blok (seperti divs) dan unsur-unsur sebaris (seperti spans). Walau bagaimanapun, ingat bahawa cara transformasi digunakan mungkin berbeza -beza bergantung kepada jenis elemen dan kedudukannya dalam susun atur.

Apa yang berlaku jika saya tidak menentukan unit untuk fungsi Terjemahan () dalam CSS?

Jika anda tidak menentukan unit untuk fungsi Terjemahan () dalam CSS, nilai -nilai ini akan dianggap sebagai nilai piksel. Ini bermakna transformasi: Terjemahan (50, 20); Walau bagaimanapun, biasanya lebih baik untuk sentiasa menentukan unit untuk memastikan kejelasan dan konsistensi.

Bagaimana untuk menghidupkan transformasi 2D dalam CSS?

Anda boleh menggunakan harta peralihan untuk menghidupkan transformasi 2D dalam CSS. Harta ini membolehkan anda menentukan tempoh, fungsi masa, dan kelewatan peralihan. Sebagai contoh, jika anda ingin menghidupkan putaran dalam 2 saat, anda boleh menggunakan kod berikut: Peralihan: Transformasi 2S; Ini akan lancar animasi putaran untuk tempoh yang ditentukan.

Apakah perbezaan antara fungsi berputar () dan condong () dalam CSS?

fungsi berputar () dan condong () dalam CSS beroperasi pada unsur -unsur dengan cara yang berbeza. Fungsi berputar () berputar unsur -unsur di sekitar titik tertentu, manakala fungsi condong () berpusing elemen di sepanjang paksi x dan y. Ini bermakna berputar () mengubah orientasi elemen, dan condong () mengubah bentuk elemen.

Bolehkah saya menggunakan fungsi transformasi 2D dengan sifat CSS lain dalam CSS?

Ya, anda boleh menggunakan fungsi transformasi 2D dalam CSS dengan sifat CSS yang lain. Sebagai contoh, anda boleh menggunakan harta Transform bersempena dengan harta Radius sempadan untuk mewujudkan elemen berputar dengan sudut bulat. Walau bagaimanapun, ingatlah bahawa urutan di mana sifat -sifat yang digunakan mempengaruhi hasil akhir.

Atas ialah kandungan terperinci Cara menggunakan fungsi transformasi 2D dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!