Kako najbolje izkoristiti preoblikovanje v CSS?

V tem članku bomo podrobno razumeli, kaj je Transform In CSS, in nadaljevali s podrobnimi praktičnimi predstavitvami.

V tem članku bomo razumeli Transform In podrobno in sledite podrobnim praktičnim prikazom. V tem članku bodo zajeti naslednji napotki:

Z napredkom funkcionalnosti spletnega mesta je enako pomembno, da na svojem spletnem mestu zagotovite pametne integracije, da bo privlačno in boljše. Potrebna je ura za dodajanje različnih elementov CSS, ki dopolnjujejo vaše spletno mesto.
Ljudje se držijo stran od spletnih mest, ki v resnici niso privlačna za množice. Torej, kako bi bilo, da bi poskušali preoblikovati nekatere elemente in polepšati svoj CSS z manjšo vrednostjo stiskanja.
Za izpolnitev podobnih potreb imamo lastnost preoblikovanja CSS, ki preoblikuje elemente tako, da jih izkrivi, zavrti, prilagodi ali prevede.





Nadaljujemo s tem člankom o Transform In CSS

Kaj je transformiranje CSS?

Pretvorba elementa CSS pomeni, da mu zagotovite rob bodisi v 2D ali 3D obliki. Vizualno spremeni slog elementa.
2D preoblikovanje deluje na osi X in Y. Za spremembe lahko navedete kateri koli rob ali strukturo na obeh oseh. Medtem ko mora za 3D preoblikovanje delati na osi X, Y in Z, da zagotovi potrebno globino.



Lastnosti preoblikovanja CSS 2D:

Funkcija Opis

matrika ( n, n, n, n, n, n )

podatkovni tip za datum v sql

Matrica šestih vrednosti



prevesti( x, y )

Omogoča premikanje elementa vzdolž osi X in Y.

translateX ( n )

Omogoča premikanje elementa vzdolž osi X.

prevediY ( n )

Omogoča premikanje elementa vzdolž osi Y.

lestvica ( x, y )

Spremeni širino in višino elementov

scaleX ( n )

Spremeni širino elementa

lestvicaY ( n )

Spremeni višino elementov

vrteti ( kota )

Omogoča zasuk elementa pod kotom, ki je določen v parametru

poševno ( kot x, kot y )

Nagne element vzdolž osi X in Y.

skewX ( kota )

Nagne element vzdolž osi X.

poševno ( kota )

Nagne element vzdolž osi Y.

Lastnosti preoblikovanja CSS 3D:

Nepremičnina

Opis

preoblikovati

Uporabi 2D ali 3D preoblikovanje elementa

transformiraj-izvor

Omogoča spreminjanje položaja na transformiranih elementih

preoblikovalni slog

Določa, kako se ugnezdeni elementi upodabljajo v 3D prostoru

perspektiva

Določa perspektivo za ogled 3D elementov

izvor-perspektiva

Določa spodnji položaj 3D elementov

vidnost v ozadju

Določa, ali naj bo element viden, če ni obrnjen proti zaslonu

Na primer:

css .element {širina: 20px višina: 20px pretvorba: lestvica (20)}

Zdaj, ko boste to storili, bo definirani element 20-krat pomanjšan.

Primer- Transformiraj CSS- Edureka

Ne samo to, lahko tudi prilagodite os za horizontalno in vertikalno skaliranje.

transform: scaleX (2) transform: scaleY (.5)

Če želite zagotoviti ustrezno preobrazbo v vseh brskalnikih, lahko:

div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}

Lastnost preoblikovanja CSS izboljša koordinatni prostor ravni vizualnega oblikovanja CSS.
Kaj je nivo vizualnega oblikovanja?
Raven vizualnega oblikovanja pomeni obdelavo dokumenta in njegovo vizualno predstavitev na medijskih platformah. Z vizualnim oblikovanjem lahko vsak element pretvorite v model, ki se ujema z modelom polja CSS. Model škatle CSS definira element v standardni obliki pravokotnega polja, ki določa velikost, položaj in lastnosti.
Opomba: Preoblikujejo se lahko samo pretvorljivi elementi.

Nadaljujemo s tem člankom o Transform In CSS

Katere so različne lastnosti preoblikovanja?

Oglejmo si vse transformirajoče lastnosti:

1. lestvica (): Skaliranje pomeni spreminjanje velikosti elementa bodisi vodoravno bodisi navpično.

Za navpično skaliranje:scaleX

Za vodoravno skaliranje:lestvicaY

Za element lahko spremenite tudi velikost pisave, oblazinjenje, višino ali širino. Privzeta vrednost je 1, kar pomeni tudi zagotavljanje 0,5, saj jo vrednost prepolovi, hkrati pa 2 podvoji skaliranje.

2. poševno (): Lastnost naklona omogoča uporabniku, da nagne element v desno ali levo od ene koordinatne točke. Skoraj kot bi pravokotnik spremenili v paralelogram. Element lahko izkrivite glede na njegove koordinate.

Primer:

.element {preoblikovanje: skewX (25deg)} .element {preoblikovanje: skewY (25deg)

Ko to storite, element poševno 25-stopinjsko vodoravno in navpično z uporabo skewX ali skewY.

3. vrti ( ) : S to lastnostjo lahko element zasukate v smeri urnega kazalca. Lahko ga zasukate za 180 ali 360 stopinj, da ga vrnete na prvotno mesto.

.element {preoblikovanje: vrtenje (25deg)}

Za zagotavljanje rotacije lahko uporabite katero koli od treh dimenzij: rotateX, rotateY ali rotateZ.

4. prevedi ( ) : Element lahko pravilno premaknete na glavo ali vstran.

.element {preoblikovanje: prevajanje (20px, 10px)}

Prevajalec bo premaknil predmet / element, naveden na glavo ali vstran. Prva navedena vrednost premakne predmet desno (negativna bo levo), druga vrednost pa navzdol (z določitvijo negativne vrednosti ga premaknete navzgor).

Če bi vas to lahko zmedlo, uporabite os X, da spremenite položaj elementa vodoravno, osi Y pa, da spremenite položaj navpično. Najbolj neverjeten vidik lastnosti preoblikovanja je, da bo uporaba preoblikovanja omogočila le premikanje elementa in ohranila vse druge elemente ali besedilo nedotaknjenimi. Razdalja se običajno izračuna v slikovnih pikah ali odstotkih.

Na primer:

.element {preoblikovanje: translateX (vrednost) pretvorba: translateY (vrednost)}

5. perspektiva (): V perspektivi elementa lahko navedete globino. Omogoča 3D-pretvorbo elementu tako, da postane transformacija kubična.
translate3d (x, y, z)
prevediZ (z)

translate3d (x, y, z) translateZ (z)

Uvedba osi z daje elementu 3D vizualizacijo. translateZ () premakne element proti gledalcu, negativna vrednost pa ga oddalji.

6. matrika () : Združite vse preobrazbe v eno.

vrti (45deg) prevedi (24px, 25px)

Uporaba matrike () združuje vse lastnosti pretvorbe v enem polju.

Uporaba lastnosti preoblikovanja lahko močno izboljša vaš element in s tem privlačnost vašega spletnega mesta. Poskusite jih!

S tem smo prišli do konca tega članka o preoblikovanju v CSS.

Če vas zanima več o spletnem razvoju, si oglejte avtor Edureka. Izobraževanje za certificiranje spletnega razvoja vam bo pomagalo Naučiti se ustvariti impresivna spletna mesta z uporabo API-jev HTML5, CSS3, Twitter Bootstrap 3, jQuery in Google ter jih namestiti v Amazon Simple Storage Service (S3).

Če vas še vedno zanima Če imate kakršno koli vprašanje, ga lahko objavite v oddelku za komentarje v tem blogu 'Kaj je CSS' in se vam bomo javili v najkrajšem možnem času.