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.
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.