V tomto článku porozumieme transformácii podrobne a nadviazať na ňu podrobnou praktickou ukážkou. V tomto článku sa budeme zaoberať nasledujúcimi ukazovateľmi,
S pokrokom vo funkčnosti webových stránok je rovnako dôležité zabezpečiť inteligentné integrácie na vašom webe, aby bol atraktívny a lepší. Pridanie rôznych prvkov CSS, ktoré dopĺňajú vaše stránky, je nevyhnutnosťou.
Ľudia zostávajú mimo webov, ktoré v skutočnosti nelákajú masy. Čo tak skúsiť transformovať niektoré z prvkov a skrášliť svoje CSS s menšou hodnotou kompresie.
Na splnenie podobných potrieb máme transformáciu vlastnosti CSS, ktorá transformuje prvky buď ich zošikmením, otočením, zmenšením alebo zmenšením mierky alebo ich prekladom.
Pokračujeme týmto článkom o Transformácii v CSS
Čo je transformácia CSS?
Transformácia prvku CSS znamená poskytnúť mu hranu v 2D alebo 3D podobe. Vizuálne to mení štýl prvku.
2D transformácia funguje na osiach X a Y. Na vykonanie zmien môžete poskytnúť ľubovoľnú hranu alebo štruktúru na oboch osiach. Pri 3D transformácii musí pracovať na osiach X, Y a Z, aby poskytla potrebnú hĺbku.
Vlastnosti transformácie CSS 2D:
| Funkcia | Popis |
matica ( n, n, n, n, n, n ) | Matica šiestich hodnôt výukové programy pre Android pre začiatočníkov |
preložiť ( x, r ) | Umožňuje prvku pohybovať sa pozdĺž osi X a Y. |
translateX ( n ) | Umožňuje prvku pohybovať sa pozdĺž osi X. |
preložiťY ( n ) | Umožňuje prvku pohybovať sa pozdĺž osi Y. |
stupnica ( x, r ) | Zmení šírku a výšku prvkov |
scaleX ( n ) | Zmení šírku prvku |
scaleY ( n ) | Zmení výšku prvkov |
točiť sa( uhol ) | Umožňuje otočiť prvok v uhle určenom v parametri |
zošikmenie ( uhol x, uhol y ) | Šikmý prvok pozdĺž osi X a Y. |
skewX ( uhol ) | Šikmý prvok pozdĺž osi X. |
šikmoY ( uhol ) | Šikmý prvok pozdĺž osi Y. |
Vlastnosti transformácie CSS 3D:
Nehnuteľnosť | Popis |
transformovať | Aplikuje na prvok 2D alebo 3D transformáciu |
transformačný pôvod | Umožňuje zmeniť pozíciu na transformovaných prvkoch |
transformačný štýl | Určuje, ako sa vnorené prvky vykresľujú v 3D priestore |
perspektíva | Určuje perspektívu toho, ako sa zobrazujú 3D prvky |
perspektívny pôvod | Určuje spodnú polohu 3D prvkov java deklaruje pole objektov |
viditeľnosť pozadia | Definuje, či má byť prvok viditeľný alebo nie, ak nie je otočený k obrazovke |
Napríklad:
css .element {šírka: 20px výška: 20px transformácia: mierka (20)}Teraz, keď tak urobíte, bude definovaný prvok zmenšený 20-krát.
Nielen to, môžete tiež meniť mierku osi pre horizontálne a vertikálne škálovanie.
transformácia: scaleX (2) transformácia: scaleY (.5)
Ak chcete zabezpečiť správnu transformáciu vo všetkých prehľadávačoch, môžete:
div {-webkit-transformácia: mierka (1,5) -moz-transformácia: mierka (1,5) -o-transformácia: mierka (1,5) transformácia: mierka (1,5)}Vlastnosť transformácie CSS zlepšuje priestor súradníc úrovne vizuálneho formátovania CSS.
Čo je úroveň vizuálneho formátovania?
Úroveň vizuálneho formátovania znamená spracovať dokument a vizuálne ho predstaviť na mediálnych platformách. Pomocou vizuálneho formátovania môžete každý prvok transformovať ako model, ktorý súhlasí s modelom poľa CSS. Boxový model CSS definuje prvok v štandardnom formáte obdĺžnikového boxu, ktorý definuje veľkosť, polohu a vlastnosti.
Poznámka: Transformovať sa dajú iba transformovateľné prvky.
Pokračujeme týmto článkom o Transformácii v CSS
Aké sú rôzne vlastnosti transformácie?
Pozrime sa na všetky transformačné vlastnosti:
1. mierka (): Zmena mierky znamená zmenu veľkosti prvku horizontálne alebo vertikálne.
Pre vertikálne zväčšenie:scaleX
Pre horizontálne zmeny mierky:scaleY
V prípade prvku môžete tiež zmeniť veľkosť písma, výplň, výšku alebo šírku. Predvolená hodnota je 1, čo tiež znamená poskytnutie 0,5, pretože hodnota ju zníži na polovicu, zatiaľ čo poskytnutie 2 zdvojnásobí mierku.
2. zošikmenie (): Vlastnosť Skew umožňuje užívateľovi nakloniť prvok doprava alebo doľava z jedného súradnicového bodu. Je to skoro ako s premenou obdĺžnika na rovnobežník. Element môžete skosiť podľa jeho súradníc.
Príklad:
.element {transformácia: skewX (25 stupňov)} .element {transformácia: skewY (25 stupňov)Keď to urobíte, prvok sa skreslí o 25 stupňov horizontálne a vertikálne pomocou skewX alebo skewY.
3. otočiť ( ) : Pomocou tejto vlastnosti môžete prvok otočiť v smere hodinových ručičiek. Môžete ho otočiť o 180 stupňov alebo 360 stupňov, aby ste ho vrátili na pôvodné miesto.
.element {transformácia: rotácia (25 stupňov)}Aj na zabezpečenie rotácie môžete použiť ktorúkoľvek z troch dimenzií: rotateX, rotateY alebo rotateZ.
4. preložiť ( ) : Element môžete posúvať správne hore dnom alebo do strán.
.element {transformácia: preložiť (20px, 10px)}Prekladač posunie zadaný objekt / prvok naopak alebo naopak. Prvá zadaná hodnota posúva objekt doprava (negatív ho posúva na ľavú stranu) a druhá hodnota ho posúva nadol (zadaním zápornej hodnoty sa posúva nahor).
Ak by vás to mohlo zmiasť, potom aplikujte os X na zmenu polohy prvku vodorovne a na osi Y zvislú zmenu polohy. Najúžasnejším aspektom vlastnosti transformácie je to, že použitie transformácie umožní elementu iba pohyb a zachová neporušený každý ďalší element alebo text. Vzdialenosť sa zvyčajne meria v pixeloch alebo percentách.
Napríklad:
.element {transformácia: translateX (hodnota) transformácia: translateY (hodnota)}5. perspektíva (): Môžete poskytnúť hĺbku v perspektíve prvku. Umožňuje dať 3D transformáciu prvku tým, že je v transformácii kockový.
preložiť3d (x, y, z)
translateZ(z)
preložiť3d (x, y, z) preložiťZ (z)
Zavedenie osi z dáva prvku 3D vizualizáciu. translateZ () posúva prvok smerom k divákovi, zatiaľ čo záporná hodnota ho posúva preč.
6. matica () : Spojte všetky transformácie do jednej.
otočiť (45 stupňov) preložiť (24 pixelov, 25 pixelov)
Aplikácia matrix () kombinuje všetky vlastnosti transformácie do jedného poľa.
ako skontrolovať palindróm v jave
Aplikácia vlastností transformácie môže výrazne vylepšiť váš prvok, a tým aj príťažlivosť vášho webu. Vyskúšajte ich!
Týmto sa dostávame na koniec tohto článku o Transformácii v CSS.
Ak sa chcete dozvedieť viac informácií o vývoji webu, pozrite si stránku od Edureka. Osvedčenie o školení v oblasti vývoja webových stránok vám pomôže Naučte sa, ako vytvárať pôsobivé webové stránky pomocou HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a ako ich nasadiť do služby Amazon Simple Storage Service (S3).
Ak stále máte záujem Ak máte akékoľvek otázky, môžete ich uverejniť v sekcii komentárov v tomto blogu „Čo je CSS“ a my sa vám ozveme čo najskôr.