Šajā rakstā mēs sapratīsim Transform In detalizēti un sekojiet tam ar detalizētu praktisku demonstrāciju. Šajā rakstā tiks apskatīti šādi norādījumi,
Uzlabojoties vietņu funkcionalitātei, ir vienlīdz svarīgi savā vietnē nodrošināt gudras integrācijas, lai padarītu to pievilcīgu un labāku. Pievienojot dažādus CSS elementus, kas papildina jūsu vietni, ir vajadzīga stunda.
Cilvēki paliek ārpus vietnēm, kuras patiesībā nepiesaista masas. Tātad, kā mēģināt pārveidot dažus elementus un izdaiļot savu CSS ar mazāku saspiešanas vērtību.
Lai izpildītu līdzīgas vajadzības, mums ir jāpārveido CSS īpašums, kas pārveido elementus, vai nu tos šķībinot, pagriežot, mērogojot vai tulkojot.
Turpinot šo rakstu par Transform CSS
Kas ir pārveidot CSS?
CSS elementa pārveidošana nozīmē nodrošināt tai malas 2D vai 3D formā. Tas vizuāli maina elementa stilu.
2D transformācija darbojas uz X un Y asīm. Lai veiktu izmaiņas, jūs varat nodrošināt jebkuru malu vai struktūru abās asīs. Kamēr 3D transformācijai ir nepieciešams strādāt ar X, Y, kā arī Z asīm, lai nodrošinātu nepieciešamo dziļumu.
CSS 2D transformācijas īpašības:
| Funkcija | Apraksts |
matrica ( n, n, n, n, n, n ) | Sešu vērtību matrica |
tulkot ( x, y ) | Ļauj elementam pārvietoties pa X un Y asi |
translateX ( n ) | Ļauj elementam pārvietoties pa X asi |
tulkotY ( n ) c ++ kārtojiet numurus augošā secībā | Ļauj elementam pārvietoties pa Y asi |
mērogs ( x, y ) | Maina elementu platumu un augstumu |
skalaX ( n ) | Maina elementa platumu |
skalaY ( n ) | Maina elementu augstumu |
pagriezt ( leņķis ) | Ļauj pagriezt elementu leņķī, kas norādīts parametrā |
šķībs ( x leņķis, y leņķis ) | Izkropļo elementu pa X un Y asi |
šķībs ( leņķis ) | Izkropļo elementu pa X asi |
šķībs ( leņķis ) | Novirza elementu gar Y asi |
CSS 3D transformācijas īpašības:
Īpašums | Apraksts |
pārveidot | Elementam piemēro 2D vai 3D transformāciju |
pārveidot-izcelsmi | Ļauj mainīt pozīciju pārveidotajos elementos |
pārveidot stilu | Norāda, kā ligzdotie elementi tiek atveidoti 3D telpā |
perspektīvā | Norāda perspektīvu, kā tiek skatīti 3D elementi |
perspektīva-izcelsme | Norāda 3D elementu apakšējo pozīciju |
aizmugures virsmas redzamība | Nosaka, vai elementam jābūt redzamam, ja tas nav vērsts pret ekrānu |
Piemēram:
css .element {width: 20px height: 20px transform: scale (20)}Tagad, kad to izdarīsit, definētais elements tiks mērogots 20 reizes.
Ne tikai to, bet arī asis var mērogot horizontālai mērogošanai un vertikālai mērogošanai.
pārveidot: skalaX (2) pārveidot: skalaY (.5)
Lai nodrošinātu pareizu pārveidošanu visās pārlūkprogrammās, varat:
div {-webkit-transformēt: mērogs (1,5) -moz-pārveidot: mērogs (1,5) -o-pārveidot: mērogs (1,5) pārveidot: mērogs (1,5)}Transformācijas CSS rekvizīts uzlabo CSS vizuālā formatējuma līmeņa koordinātu telpu.
Kas ir vizuālā formatējuma līmenis?
Vizuālā formatējuma līmenis nozīmē dokumenta apstrādi un vizuālu prezentāciju multivides platformās. Izmantojot vizuālo formatējumu, katru elementu varat pārveidot par modeli, kas atbilst CSS lodziņa modelim. CSS lodziņa modelis nosaka elementu taisnstūrveida lodziņa formātā, nosakot izmēru, pozīciju un īpašības.
Piezīme: Pārveidot var tikai pārveidojamus elementus.
Turpinot šo rakstu par Transform CSS
Kādas ir dažādas transformācijas īpašības?
Apskatīsim visas pārveidojošās īpašības:
1. mērogs (): Mērogošana nozīmē mainīt elementa lielumu horizontāli vai vertikāli.
Vertikālai mērogošanai:skalaX
Horizontālai mērogošanai:skalaY
Elementam varat mainīt arī fonta lielumu, polsterējumu, augstumu vai platumu. Noklusējuma vērtība ir 1, kas nozīmē arī vērtību 0,5, jo vērtība to samazina uz pusi, bet vērtība 2 dubulto mērogošanu.
2. šķībs (): Slīpa īpašība ļauj lietotājam noliekt elementu pa labi vai pa kreisi no viena koordinātu punkta. Tas ir gandrīz kā taisnstūra pārvēršana paralelogramā. Elementu var sašķobīt pēc tā koordinātām.
Piemērs:
.element {pārveidot: šķībsX (25deg)} .elements {pārveidot: šķībsY (25deg)Kad jūs to izdarīsit, elements horizontāli un vertikāli šķībs par 25 grādiem, izmantojot slīpiX vai šķībs.
3. pagriezt ( ) : Izmantojot šo rekvizītu, varat pagriezt elementu pulksteņrādītāja kustības virzienā. Varat to pagriezt par 180 grādiem vai par 360 grādiem, lai atgrieztu to sākotnējā vietā.
.element {pārveidot: pagriezt (25deg)}Lai nodrošinātu arī rotāciju, varat izmantot jebkuru no trim izmēriem: rotateX, rotateY vai rotateZ.
4. tulkot ( ) : Elementu var pareizi pārvietot otrādi vai uz sāniem.
.element {pārveidot: tulkot (20px, 10px)}Tulkojums pārvietos norādīto objektu / elementu otrādi vai uz sāniem. Pirmā norādītā vērtība pārvieto objektu pa labi (negatīvs pārvietos to pa kreisi), bet otrā vērtība - uz leju (norādot negatīvu vērtību, tas tiks virzīts uz augšu).
Ja tas var jūs sajaukt, tad lietojiet X asi, lai mainītu elementa pozīciju horizontāli, un Y asis, lai mainītu pozīciju vertikāli. Pārsteidzošākais transformācijas rekvizītu aspekts ir tāds, ka transformācijas izmantošana ļaus elementam pārvietoties tikai katru citu elementu vai tekstu saglabājot neskartu. Attālums parasti tiek ņemts pikseļos vai procentos.
Piemēram:
.element {pārveidot: translateX (vērtība) pārveidot: tulkotY (vērtība)}5. perspektīva (): Jūs varat norādīt dziļumu elementa perspektīvā. Tas ļauj piešķirt 3D transformāciju elementam, padarot to transformācijā kubisku.
tulkot3d (x, y, z)
tulkot Z (z)
tulkot3d (x, y, z) tulkotZ (z)
Z ass ieviešana piešķir elementam 3D vizualizāciju. translateZ () pārvieto elementu pret skatītāju, bet negatīva vērtība - prom.
6. matrica () : Apvieno visus pārveidojumus vienā.
pagriezt (45deg) tulkot (24px, 25px)
Matricas () lietošana apvieno visas transformācijas īpašības vienā masīvā.
Pārveidošanas rekvizītu izmantošana var ievērojami uzlabot jūsu elementu un līdz ar to jūsu vietnes pievilcību. Izmēģiniet tos!
Tas mūs noved pie šī raksta par Transform In CSS beigām.
Ja vēlaties uzzināt vairāk par tīmekļa izstrādi, skatiet vietni autore Edureka. Tīmekļa attīstības sertifikācijas apmācība palīdzēs jums uzzināt, kā izveidot iespaidīgas vietnes, izmantojot HTML5, CSS3, Twitter Bootstrap 3, jQuery un Google API, un izvietot to Amazon Simple Storage Service (S3).
Ja jūs joprojām interesējat Ja jums ir kādi jautājumi, varat tos ievietot šī emuāra “Kas ir CSS” komentāru sadaļā, un mēs pēc iespējas ātrāk sazināsimies ar jums.