Transform lekérdezése jQuery-ből

Transform lekérdezése jQuery-ből
2019-07-26T22:10:10+02:00
2019-07-29T08:18:53+02:00
2022-10-15T21:41:14+02:00
kerdezo3
<!DOCTYPE html> <html lang=hu> <head> <meta charset="UTF-8"> <script src="jquery.js"></script> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } div { display: flex; height: 90%; align-items: center; justify-content: center; transform-style: preserve-3d; perspective: 800px; perspective-origin: 30% 60%; } img { transform: translateX(200px) translateY(-100px) translateZ(50px) rotateX(30deg) rotateY(10deg) rotateZ(5deg) scaleX(0.9) scaleY(0.8) scaleZ(1.4) skewX(2deg) skewY(3deg) } </style> </head> <body> <div> <img src="kep.jpg"> </div> <span></span> <script> var matrix = jQuery('img').css('transform'); $("span").html(matrix); </script> </body> </html>
Ha lekérdem a transform értékét jQuery-ből (későbbi animáláshoz kellenek az eredeti, kiindulási értékek), akkor matrix3D-ben adja vissza, de elég furcsa értékekkel. Nem igazán látni át, hogy melyik melyikhez tartozik. Tudtok ebben segíteni? Köszönöm
Mutasd a teljes hozzászólást!
Lehet, hogy félre értem a szándékod de lehet, hogy ezek közül kellene valamelyik vagy a kombinációjuk?
link1, link2, link3, link4...
Megj: Ha van időd itt próbáld ki a "see also" alatti lehetőségeket (és ezt)...
Mutasd a teljes hozzászólást!

  • A furcsa adatok:
    matrix3d(0.880972, 0.181896, -0.0743523, 0, -0.0378319, 0.689221,
    0.405625, 0, 0.243107, -0.689365, 1.19402, 0, 200, -100, 50, 1)
    *********************************************-
    Csak kérdés: Ha a kiindulási beállításod mindig ez

    transform: translateX(200px) translateY(-100px) translateZ(50px) rotateX(30deg) rotateY(10deg) rotateZ(5deg) scaleX(0.9) scaleY(0.8) scaleZ(1.4) skewX(2deg) skewY(3deg)
    akkor az oldal betöltődésekor miért nem ezt teszed bele fixen a tárolt változóidba és ha JQ-val ezt akarod beállítani, akkor rendelkezésre fog állni?
    Mutasd a teljes hozzászólást!
  • Nem jó "beleégetni" a programba egy konkrét értéket, jobb lekérdezni azt.
    De most nem is ez volt a kérdés. Hanem, hogy melyik érték mit takar? Például a 2., a 0.181896 az melyik a eredetileg a transformba be van állítva?
    Mutasd a teljes hozzászólást!
  • Például a 2., a 0.181896 az melyik a eredetileg a transformba be van állítva?

    Semelyik. Az összes érték együtt határoz meg egy úgynevezett transzformációs mátrixot, ami az összes általad megadott eltolás, forgatás és nyírás kombinációjaként alakult ki, és utólag visszaszámolni belőle az egyes műveleteket nem lehet könnyen. Ha kellenek az eredeti értékek is, tárold őket valahol máshol is.
    Mutasd a teljes hozzászólást!
  • Ezt úgy képzeld el, mintha egy város egyik pontjából a másikba jutnál el, és ebből akarná valaki rekonstruálni, hogy pontosan merre mentél.
    Az egyes transzformációk önálló mátrixok (pl. Translation (geometry) - Wikipedia , Rotation matrix - WikipediaScaling (geometry) - Wikipedia ), és ezek szorzata az, amit a végén látsz. Ha kikötöd a lépések sorrendjét, akkor végülis lesz egy darab konkrét egyenletrendszered, csak elég nehéz lesz megoldani.
    Mutasd a teljes hozzászólást!
  • Csak egy ötlet, hogy ne kelljen semmit tárolni ahhoz, hogy pl. egy klikkel visszaállítsd a betöltődéskori traformációs megjelenést:

    .img { /* figyelj, mert class */ transform: translateX(200px) translateY(-100px) translateZ(50px) rotateX(30deg) rotateY(10deg) rotateZ(5deg) scaleX(0.9) scaleY(0.8) scaleZ(1.4) skewX(2deg) skewY(3deg) } .new_anim { transform: translateX(100px) translateY(-50px) translateZ(25px) rotateX(20deg) rotateY(5deg) rotateZ(3deg) scaleX(0.8) scaleY(0.7) scaleZ(1.3) skewX(3deg) skewY(2deg) } </style> <script> $(document).ready(function(){ $(".img").dblclick(function(){ $(this).addClass("new_anim"); }); $(".img").click(function(){ $(this).removeClass("new_anim"); $(this).addClass("img"); }); }) </script> </head> <body> <div> <h1 style="position:fixed;left:0;top:0;">DblKlikk (másik transform) és Klikk (betöltéskori transform)...</h1> <img src="../../../akepek/image1.jpg" class="img">
    ... OFF ...
    Megj: A kódod hiányzó részét nem módodsítottam...
    Mutasd a teljes hozzászólást!
  • Parallax scroll-hoz kellett volna, ami folyamatosan változik. Még egy plugin-t se találtam hozzá, pedig az ilyen mátrix-os egyenletrendszerekhez lennie kellene.
    Mutasd a teljes hozzászólást!
  • Lehet, hogy félre értem a szándékod de lehet, hogy ezek közül kellene valamelyik vagy a kombinációjuk?
    link1, link2, link3, link4...
    Megj: Ha van időd itt próbáld ki a "see also" alatti lehetőségeket (és ezt)...
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd