Transformasi 2D dalam CSS memungkinkan kita melakukan beberapa operasi transformasi dasar dalam ruang dua dimensi, seperti memindahkan, memutar, menskalakan atau memutar, dll. Elemen yang diubah mirip dengan elemen yang diposisikan secara absolut dan tidak akan memengaruhi elemen di sekitarnya, tetapi dapat digabungkan dengan elemen Sekitarnya tumpang tindih. Bedanya, elemen yang dikonversi akan tetap menempati ruang sebelum konversi pada halaman.
Mari perkenalkan konversi 2D:
1. Pindahkan terjemahan()
Berdasarkan parameter yang diberikan oleh posisi kiri (sumbu X) dan atas (sumbu Y), berpindah dari posisi elemen saat ini dapat mengubah posisi elemen pada halaman, serupa dengan penentuan posisi.
1. Tata Bahasa:
transformasi:terjemahkan(x,y);
Atau Anda dapat menulisnya secara terpisah
transformasi:translateX(n);transformasi:translateY(n);
2. Poin-poin penting:
(1) Mendefinisikan pergerakan dalam transformasi 2D, dan memindahkan elemen sepanjang sumbu X dan Y;
(2) Keuntungan terbesar dari terjemahan adalah tidak mempengaruhi posisi elemen lain;
(3) Persentase terjemahan itu sendiri relatif terhadap unsur terjemahannya sendiri (50%, 50%);
(4) Ini tidak berpengaruh pada tag sebaris;
Contoh:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:translate(100px,10px);}</style></head><body ><div></div></tubuh></html>Hasil berjalan:
2. Putar putar()
Metode memutar() memutar elemen searah jarum jam dengan derajat tertentu. Nilai negatif diperbolehkan, yang menyebabkan elemen diputar berlawanan arah jarum jam.
Sintaks: transfrom:rotate (derajat rotasi)
Poin-poin penting:
putar (derajat), satuannya derajat. Misalnya: putar (45 derajat);
Jika sudutnya positif maka searah jarum jam, jika negatif maka berlawanan arah jarum jam;
Secara default, titik tengah searah jarum jam adalah titik tengah elemen;
Contoh:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px20px;transform:rotate(45deg);}</style></head> <tubuh><div></div></body></html>Hasil berjalan:
3. Titik pusat transformasi 2D asal transformasi:
tata bahasa:
transformasi-asal:xy;
Poin-poin penting:
(1) Perhatikan bahwa x dan y dipisahkan oleh spasi;
(2) Titik pusat default xy adalah titik pusat elemen (50% 50%);
(3) Anda juga dapat mengatur piksel atau kata benda arah untuk xy (kanan kiri tengah bawah atas);
4. Skala pembesaran()
metode scale(), ukuran elemen bertambah atau berkurang, bergantung pada parameter lebar (sumbu X) dan tinggi (sumbu Y):
(1) Memodifikasi ukuran elemen, memperbesar atau memperkecil elemen
(2) Jika bilangan negatif maka akan dibalik.
(3) Format sintaksis fungsinya adalah sebagai berikut:
skala(sx,sy)
Dimana sx melambangkan rasio skala pada arah horizontal, dan sy melambangkan rasio skala pada arah vertikal. Selain itu, parameter sy dapat dihilangkan, dan nilai defaultnya sama dengan sx.
Contoh:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:scale(0.7);}</style></head><body>< div></div></body></html>Hasil berjalan:
5. Kemiringan()
Berisi dua nilai parameter, yang menunjukkan sudut kemiringan sumbu X dan sumbu Y. Jika parameter kedua kosong, defaultnya adalah 0. Parameter negatif berarti miring ke arah yang berlawanan.
(1) skewX(<angle>); berarti miring hanya pada sumbu X (arah horizontal).
(2) skewY(<angle>); artinya miring hanya pada sumbu Y (arah vertikal).
(3) Membuat elemen miring ke arah yang berbeda.
(4) kemiringan(a) sama dengan kemiringan(a,0)
(5)condong(x,y)
(6) Satuan derajat sudut
Contoh:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);}</style>< /head><tubuh><div></div></body></html>Hasil berjalan:
6. matriks()
Fungsi matriks() dapat dianggap sebagai singkatan dari beberapa fungsi: skew(), skala(), putar() dan terjemahkan(). Semua operasi konversi 2D dapat didefinisikan secara bersamaan melalui fungsi matriks() format sintaks fungsinya adalah sebagai berikut:
matriks(a,b,c,d,tx,ty)
Enam parameter dalam fungsi matriks() masing-masing berhubungan dengan scaleX(), skewY(), skewX(), scaleY(), TranslateX(), dan TranslateY() , seperti:
terjemahkan(tx,ty)=matriks(1,0,0,1,tx,ty);：
dimana tx dan ty adalah nilai translasi horizontal dan vertikal;
putar(a)=matriks(cos(a),sin(a),-sin(a),cos(a),0,0);
dimana a adalah nilai derajat. Anda dapat membalikkan rotasi dengan menukar nilai sin(a) dan -sin(a);
skala(sx,sy)=matriks(sx,0,0,sy,0,0);
dimana sx dan sy adalah nilai skala horizontal dan vertikal;
condong(kapak,ay)=matriks(1,tan(ay),tan(ay),1,0,0);
dimana ax dan ay adalah nilai horizontal dan vertikal dalam derajat.
Contoh:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;float:left;}.one{transform:matrix(0.866,0.5, -0.5,0.866,0,0);}.two{margin-left:35px;transform:matrix(0.586,0.8,-0.8,0.686,0,0);}.three{margin-left:40px;margin- top:25px;transform:matrix(0.586,0.8,-0.8,0.866,0,0);}.empat{transform:matrix(0.586,0.8,-0.8,0.586,40,30);}</style>< /head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></div></body></html>Hasil berjalan:
Metode matriks() dan metode transformasi 2D digabungkan menjadi satu.
Metode matriks memiliki enam parameter, antara lain fungsi rotasi, penskalaan, pergerakan (translasi), dan kemiringan.
Gunakan matriks untuk menyatakan jumlah transformasi matriks (a,b,c,d,x,y)
●acx
●bdy
●0 0 1
Mari kita praktikkan menggunakan kasus tertentu:
Kodenya adalah sebagai berikut:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Dokumen</title><style>body{margin:100px;}.transformElement{width:200px;height:200px;background-color:red;transition:all1slinear;float:left;position:relative;left:0; warna:#FFF;/*transform-origin:lefttop;*/}.transformElement2{width:200px;height:200px;background-color:blue;transition:all1slinear;float:left;}.transformElement:hover{/*transform :translate(200px,0)rotate(360deg)scale(2);*//*kiri:100px;*//*transform:scale(2,0.5)*/transform:skew(-45deg,45deg);}. jam{lebar:400px;height:400px;border-radius:50%;background-color:#Faa;position:relative;}.stick{width:4px;height:200px;background-color:blue;position:absolute; kiri:198px;atas:0;transisi:all12slinear;transform-origin:centerbottom;}.stickshort{width:8px;height:100px;background-color:rgb(142,21,248);posisi:absolute;kiri:196px;atas :100px;transition:all12slinear;transform-origin:centerbottom;z-index:2;}.clock:hover.stick{transform:rotate(4320deg);}.clock:hover.stickshort{transform:rotate(360deg);} </style></head><body><!--<div></div><div></div>--><div><div></div><div></div>< /div></body></html>Hasil berjalan:
