U ovom ćemo članku razumjeti Transform In detaljno i slijedite ga detaljnim praktičnim demonstracijama. U ovom će članku biti obrađeni sljedeći smjerovi,
Uz napredak u funkcionalnostima web mjesta, jednako je važno osigurati pametne integracije na vašem web mjestu kako bi bilo privlačno i bolje. Potrebno je sat vremena za dodavanje različitih CSS elemenata koji dopunjuju vašu web lokaciju.
Ljudi se klone web stranica koje zapravo ne privlače mase. Pa, kako bi bilo da pokušate transformirati neke elemente i uljepšati svoj CSS manjom vrijednošću kompresije.
Da bismo udovoljili sličnim potrebama, imamo svojstvo CSS transform koje transformira elemente bilo iskrivljavanjem, okretanjem, skaliranjem ili prevođenjem.
Nastavljamo s ovim člankom o Transform In CSS
Što je transformiraj CSS?
Transformacija CSS elementa znači pružiti mu rub u 2D ili 3D obliku. Vizualno mijenja stil elementa.
2D transformacija radi na X i Y osi. Možete unijeti bilo koji rub ili strukturu na obje osi da napravite promjene. Dok je za 3D transformaciju potrebno raditi na X, Y, kao i na Z osi kako bi se osigurala potrebna dubina.
Svojstva CSS 2D transformacije:
| Funkcija | Opis |
matrica( n, n, n, n, n, n ) | Matrica od šest vrijednosti |
Prevedi( x, y ) | Omogućuje elementu da se kreće duž osi X i Y. |
translateX ( n ) | Omogućuje elementu da se kreće duž osi X. |
prevediY ( n ) | Omogućuje elementu da se kreće duž Y osi |
ljestvica ( x, y ) instalirati php na Windows 7 | Mijenja širinu i visinu elemenata |
scaleX ( n ) | Mijenja širinu elementa |
skalaY ( n ) | Mijenja visinu elementa |
rotirati( kut ) | Omogućuje okretanje elementa pod kutom koji je naveden u parametru |
iskriviti ( kut x, kut y ) | Naginje element duž osi X i Y. |
skewX ( kut ) | Naginje element duž osi X. |
iskrivljeno ( kut ) | Kosi element duž Y osi |
Svojstva CSS 3D transformacije:
Vlasništvo | Opis |
transformirati | Primjenjuje 2D ili 3D transformaciju na element |
transformirati-podrijetlo | Omogućuje vam promjenu položaja na transformiranim elementima |
transformirati-stil | Određuje kako se ugniježđeni elementi generiraju u 3D prostoru |
perspektiva | Određuje perspektivu gledanja 3D elemenata |
podrijetlo iz perspektive | Određuje položaj dna 3D elemenata |
vidljivost sa stražnje strane | Definira treba li element biti vidljiv ako nije okrenut prema zaslonu |
Na primjer:
css .element {širina: 20px visina: 20px transformacija: razmjera (20)}Sada, kada to učinite, definirani element skalirat će se 20 puta.
I ne samo to, možete i skalirati osi za vodoravno i okomito skaliranje.
pretvoriti: razmjeraX (2) pretvoriti: razmjeraY (.5)
Da biste osigurali odgovarajuću transformaciju u svim preglednicima, možete:
div {-webkit-transformiraj: razmjera (1,5) -moz-pretvori: mjerilo (1,5) -o-pretvori: mjerilo (1,5) pretvori: mjerilo (1,5)}Svojstvo transformiranja CSS-a poboljšava koordinatni prostor razine vizualnog oblikovanja CSS-a.
Što je razina vizualnog oblikovanja?
Razina vizualnog oblikovanja znači obraditi dokument i vizualno ga predstaviti na medijskim platformama. Vizualnim formatiranjem možete svaki element transformirati kao model koji se slaže s modelom CSS okvira. CSS model okvira definira element u standardnom pravokutnom formatu okvira definirajući veličinu, položaj i svojstva.
Bilješka: Samo transformirani elementi mogu se transformirati.
Nastavljamo s ovim člankom o Transform In CSS
Koja su različita svojstva transformacije?
Pogledajmo sva svojstva preobrazbe:
1. skala (): Skaliranje znači promjenu veličine elementa bilo vodoravno ili okomito.
Za okomito skaliranje:skalaX
Za vodoravno skaliranje:skalaY
Za element također možete promijeniti veličinu fonta, obloge, visinu ili širinu. Zadana vrijednost je 1, što također znači davanje 0,5, jer je vrijednost prepolovljuje, a 2 daje dvostruko skaliranje.
2. iskriviti (): Svojstvo iskosa omogućuje korisniku da nagne element udesno ili ulijevo od jedne koordinatne točke. Gotovo je poput pretvaranja pravokutnika u paralelogram. Možete iskriviti element prema njegovim koordinatama.
Primjer:
.element {transformacija: skewX (25deg)} .element {transformacija: skewY (25deg)Kada to učinite, element se kosi 25 stupnjeva vodoravno i okomito pomoću skewX ili skewY.
3. okretati ( ) : Pomoću ovog svojstva možete rotirati element u smjeru kazaljke na satu. Možete ga zakrenuti za 180 ili 360 stupnjeva da biste ga vratili na prvobitno mjesto.
.element {transformiraj: rotiraj (25deg)}Da biste osigurali i rotaciju, možete koristiti bilo koju od tri dimenzije: rotateX, rotateY ili rotateZ.
4. prevesti ( ) : Element možete pravilno premjestiti naopako ili bočno.
.element {transformiraj: prevedi (20px, 10px)}Prevodilac će pomaknuti objekt / element naveden naopako ili bočno. Prva navedena vrijednost pomiče odjeljak udesno (negativna će ga pomicati lijevu stranu), a druga vrijednost pomiče ga prema dolje (specificiranje negativne vrijednosti pomaknut će ga prema gore).
Ako bi vas ovo moglo zbuniti, primijenite os X za promjenu položaja elementa vodoravno, a osi Y za promjenu položaja okomito. Nevjerojatan aspekt svojstva transform je taj što će primjena pretvorbe omogućiti samo pomicanje elementa, zadržavajući svaki drugi element ili tekst netaknutim. Udaljenost se obično uzima u pikselima ili postocima.
Na primjer:
.element {transformiraj: translateX (vrijednost) transformiraj: translateY (vrijednost)}5. perspektiva (): Možete pružiti dubinu perspektive elementa. Omogućuje davanje 3D transformacije elementu čineći ga kubnim u transformaciji.
prevedi3d (x, y, z)
prevediZ (z)
prevesti3d (x, y, z) prevestiZ (z)
Uvođenje z osi daje elementu 3D vizualizaciju. translateZ () pomiče element prema pregledniku, dok ga negativna vrijednost odmiče.
6. matrica () : Kombinirajte sve transformacije u jednu.
zakreni (45deg) prevedi (24px, 25px)
Primjena matrice () kombinira sva svojstva pretvorbe u jednom nizu.
string konstantni bazen u javi
Primjena svojstava pretvorbe može uvelike poboljšati vaš element, a time i privlačnost web mjesta. Isprobajte ih!
To nas dovodi do kraja ovog članka o Transform In CSS.
Ako vas zanima više o web-razvoju, pogledajte od Edureke. Obuka za certificiranje web razvoja pomoći će vam naučiti kako stvoriti impresivne web stranice pomoću HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API-ja i rasporediti ih na Amazon Simple Storage Service (S3).
Ako ste i dalje zainteresirani Ako imate bilo kakvo pitanje, možete ga objaviti u odjeljku za komentare na ovom blogu 'Što je CSS' i javit ćemo vam se u najkraćem mogućem roku.