Css elmozdulás, forgatás, 3d
Kedves webmesterek.
Ritka animáció a transzformációs tulajdonság nélkül. Nézzük meg közelebbről a csodálatos CSS eszköz összes funkcióját, hogy mit és hogyan alkalmazzák.
Az alábbi példák mindegyike akkor fog működni, amikor a mutatót leütjük, hogy láthassuk a transzformációs tulajdonság hatását
Alapjául, vegye be a blokkot
Ebben a css kódban a transzformációs tulajdonságot a végrehajtott függvényekkel (értékekkel) helyettesítjük.
Csökkenés - növekedés
a) átalakítás. skála (0,5); - vízszintesen és függőlegesen skálázza az elemet. Egy nagyobb, mint egy nő; elem, és kevesebb, mint egy - csökkenti.
b) transzformálni. scaleX (0,5); - horizontálisan skálázza az elemet;
c) transzformálni. scaleY (0,5); - függőlegesen skálázza az elemet;
a) átalakítás. skewX (30deg); - Az elemet függőlegesen (ebben az esetben 30 ° -kal) függőlegesen szögben billentheti. A negatív érték elhúzza az elemet a másik oldalra;
b) transzformálni. ferde (30deg); - az elemet vízszintesen meghatározott szögben döntve;
elmozdulás
a) átalakítás. fordítása (50px); - Az elemet vízszintesen és függőlegesen mozgatja a megadott értékre;
b) transzformálni. fordításaX (50px); - Az elemet vízszintesen mozgatja. A pozitív érték jobbra tolódik, negatív érték balra.
c) transzformálni. fordítóY (50px); - Mozgassa az elemet függőlegesen. A pozitív érték eltolódik, negatív érték felfelé;
a) átalakítás. forgatni (45deg); - Forgassa az elemet a középpont körül (alapértelmezés szerint) a meghatározott szögben;
b) transzformálni. rotateY (360deg); - Forgassa el az elemet a függőleges tengely körül. A 3D-ben és annak alján található;
c) transzformálni. rotateX (360deg); - Forgassa az elemet a vízszintes tengely körül. 3D-ben használják;
átalakítani. mátrix (); - Az elem visszaverődésének hatását hozza létre.
A visszaverődés hatására a
A reflexió típusát megváltoztathatja az első négy számjegy kombinációjának megváltoztatásával az 1-ről -1-re változtatva. Az ötödik számjegy mozgatja az elemet az X tengely mentén, a hatodik az Y tengely mentén.
transzformációs stílusban. megőrzése-3d; - 3D effektust hoz létre.
A koordináták helye
transzformációs eredetű. x y z; - meghatározza a pont koordinátáit annak a középpontnak megfelelően, amely körül az elem elfordul.
Két értéket használnak a síkban (x y), 3D három értékben (x y z)
Ez arról szól, hogy a dolgok hogyan történtek.
Most az animációt az adott végrehajtási idővel rendelkező elemhez csatolhatja, majd a @ keyframes szabályban adja meg a transzformáció tulajdonságát a kívánt funkcióval a ciklus elején és végén.
Például: az elem fokozatosan dönthető az animáció során
Kívánom kreatív sikereket.
És most mi érdekesebb?