Ebben a cikkben megértjük a Transform In-t részletesen, és utána egy részletes gyakorlati bemutatóval. A következő hivatkozásokkal foglalkozunk ebben a cikkben,
A weboldal funkcióinak fejlődésével egyformán fontos okos integrációkat biztosítani a webhelyén annak érdekében, hogy vonzóbbá és jobbá váljon. Különböző CSS-elemek hozzáadása, amelyek bonyolítják a webhelyét, az óra szükségessége.
Az emberek távol maradnak azoktól a weboldalaktól, amelyek nem igazán vonzzák a tömegeket. Szóval, mit szólnál ahhoz, ha megpróbálnál átalakítani néhány elemet, és kisebb tömörítési értékkel szépíteni a CSS-t.
Hasonló igények kielégítésére átalakítottuk a CSS tulajdonságot, amely az elemeket akár ferdítéssel, forgatással, méretezéssel vagy fordítással transzformálja.
Folytatás ezzel a cikkel a Transform CSS-ről
Mi az átalakuló CSS?
A CSS elem átalakítása azt jelenti, hogy élt kapjon 2D vagy 3D formában. Vizuálisan megváltoztatja egy elem stílusát.
A 2D transzformáció X és Y tengelyen működik. Bármelyik élt vagy szerkezetet megadhatja mindkét tengelyen a változtatások elvégzéséhez. Míg a 3D transzformációhoz X, Y és Z tengelyeken kell dolgoznia a szükséges mélység biztosításához.
CSS 2D transzformációs tulajdonságok:
| Funkció | Leírás |
mátrix( n, n, n, n, n, n ) | Hat érték mátrixa |
fordít( x, y ) | Lehetővé teszi az elem mozgását az X- és az Y-tengely mentén különbség a dobás és a dobások között |
translateX ( n ) | Lehetővé teszi az elem mozgását az X tengely mentén |
fordításY ( n ) | Lehetővé teszi az elem mozgását az Y tengely mentén |
skála( x, y ) | Megváltoztatja az elemek szélességét és magasságát |
skálaX ( n ) | Megváltoztatja az elem szélességét |
skálaY ( n ) | Megváltoztatja az elemek magasságát |
forog( szög ) | Lehetővé teszi az elem forgatását a paraméterben megadott szögben |
ferde( x-szög, y-szög ) | Ferde az elemet az X- és az Y-tengely mentén |
ferdeX ( szög ) | Ferde az elemet az X tengely mentén |
ferde ( szög ) | Ferde az elemet az Y tengely mentén |
CSS 3D transzformációs tulajdonságok:
Ingatlan | Leírás |
átalakul | 2D vagy 3D transzformációt alkalmaz egy elemre |
átalakulás-eredet | Lehetővé teszi az átalakított elemek helyzetének megváltoztatását |
átalakulási stílusú | Megadja, hogy a beágyazott elemek hogyan legyenek megjelenítve a 3D-s térben |
perspektíva | Megadja a 3D elemek megtekintésének perspektíváját |
perspektíva-eredet | Megadja a 3D elemek alsó helyzetét hogyan lehet kettősből int |
hátlap-láthatóság | Megadja, hogy egy elemnek láthatónak kell-e lennie, ha nem néz a képernyő felé |
Például:
css .element {szélesség: 20px magasság: 20px átalakítás: méretarány (20)}Most, amikor ezt megteszi, a megadott elem 20-szoros lesz.
Nem csak ez, hanem vízszintes méretezéshez és függőleges méretezéshez is bölcsen méretezhető.
transzformáció: skálaX (2) transzformáció: skálaY (.5)
A megfelelő átalakítás érdekében az összes böngészőben megteheti:
python def __init__
div {-webkit-transzformáció: skála (1,5) -moz-transzformáció: skála (1,5) -o-transzformáció: skála (1,5) transzformáció: skála (1,5)}A CSS átalakítás tulajdonság javítja a CSS vizuális formázási szint koordinátaterét.
Mi a vizuális formázási szint?
A vizuális formázási szint egy dokumentum feldolgozását és vizuális bemutatását jelenti a médiaplatformokon. A vizuális formázással minden elemet átalakíthat modellként, amely megegyezik a CSS dobozmodellel. A CSS dobozmodell egy téglalap alakú dobozformátumban definiál egy elemet, meghatározva a méretet, a pozíciót és a tulajdonságokat.
Jegyzet: Csak átalakítható elemek alakíthatók át.
Folytatás ezzel a cikkel a Transform CSS-ről
Melyek a különféle transzformációs tulajdonságok?
Nézzük meg az összes átalakító tulajdonságot:
1. skála (): A méretezés az elem méretének vízszintes vagy függőleges megváltoztatását jelenti.
Függőleges méretezéshez:skálaX
Vízszintes méretezéshez:skálaY
Egy elem esetében megváltoztathatja a betűméretet, a kitöltést, a magasságot és a szélességet is. Az alapértelmezett érték 1, ami azt is jelenti, hogy 0,5 értéket ad meg, mivel az érték felezi, míg a 2 érték megduplázza a méretezést.
2. ferde (): A ferdeségi tulajdonság lehetővé teszi a felhasználó számára, hogy egy elemet egy koordinátaponttól jobbra vagy balra döntsön. Szinte olyan, mintha egy téglalapot paralelogrammává változtatnánk. Elferdíthet egy elemet a koordinátái szerint.
Példa:
.element {transzformáció: skewX (25deg)} .element {transzformáció: skewY (25deg)Amikor ezt megteszi, az elem vízszintesen és függőlegesen 25 fokkal ferde a skewX vagy a ferdeség használatával.
3. forgatás ( ) : Ennek a tulajdonságnak az segítségével az elemet az óramutató járásával megegyező irányba forgathatja. 180 fokkal vagy 360 fokkal elforgathatja, hogy visszahozza eredeti helyére.
.element {átalakítás: forgatás (25deg)}A forgatás biztosításához a három dimenzió bármelyikét használhatja: rotateX, rotateY vagy rotateZ.
4. lefordítani ( ) : Az elemeket megfelelően fejjel lefelé vagy oldalra mozgathatja.
.element {átalakítás: fordítás (20px, 10px)}A Fordítás a megadott objektumot / elemet fejjel lefelé vagy oldalra mozgatja. Az első megadott érték az objektumot jobbra mozgatja (a negatív bal oldalra), a második pedig lefelé (negatív érték megadásával felfelé).
Ha ez megzavarhatja Önt, akkor alkalmazza az X tengelyt az elem vízszintes helyzetének megváltoztatásához, az Y tengely pedig a függőleges helyzet megváltoztatásához. A transzformációs tulajdonság legcsodálatosabb szempontja, hogy a transzformáció alkalmazása csak az elem mozgását teszi lehetővé, minden más elemet vagy szöveget érintetlenül tartva. A távolságot általában pixelben vagy százalékban adják meg.
Például:
.element {transzformáció: translateX (érték) transzformáció: fordításY (érték)}5. perspektíva (): Mélységet adhat meg egy elem perspektívájában. Lehetővé teszi egy elem 3D-s átalakítását azáltal, hogy kubikussá teszi az átalakítást.
fordít3d (x, y, z)
fordít Z (z)
fordítás3d (x, y, z) fordításZ (z)
A z tengely bevezetése 3D elemet jelenít meg. A translateZ () az elemet a néző felé mozgatja, míg a negatív érték eltávolítja.
6. mátrix () : Egyesítse az összes transzformációt egybe.
forgatás (45deg) fordítás (24px, 25px)
A () mátrix alkalmazása az összes transzformációs tulajdonságot egy tömbben egyesíti.
A transzformációs tulajdonságok alkalmazása nagymértékben javíthatja elemét, és ezáltal vonzóbbá teheti webhelyét. Próbáld ki őket!
Ezzel eljutottunk a Transform CSS-ről szóló cikkünk végéhez.
Ha többet szeretne megtudni a webfejlesztésről, nézze meg a írta Edureka. A webfejlesztési tanúsítási képzés segít megtanulni, hogyan hozhat létre lenyűgöző weboldalakat HTML5, CSS3, Twitter Bootstrap 3, jQuery és Google API-k segítségével, és telepítheti az Amazon Simple Storage Service (S3) szolgáltatásba.
Ha továbbra is érdekel Ha kérdése van, feltöltheti ennek a „Mi az a CSS” blognak a megjegyzés rovatába, és mi a lehető leghamarabb kapcsolatba lépünk Önnel.