Programim dhe zhvillim, javascript, python, php, html

Kombinoni transformimet css3 nëpërmjet js

ju lutem a ka ndonjë mënyrë si të kombinohen më shumë transformime CSS3 me kalimin e kohës? Për shembull, kur vendosa këtë

$bgWrapper.css({
 '-webkit-transform' : ' scale3d(' + currScale + ', '+ currScale +', 1)'
});

Dhe pastaj në pak çaste kjo

$bgWrapper.css({
'-webkit-transform' : 'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});

Unë kam një problem. Transformimi i parë tejkalohet me të dytin, por kjo është ajo që unë definitivisht nuk dua të ndodhë. Kështu që vura re se mund t'i kombinoj këto vlera, kështu që mund të ruaj përkohësisht të vjetrën dhe ta bëj këtë

var tmpTransform = $bgWrapper.css('-webkit-transform');
$bgWrapper.css({
'-webkit-transform' : ''+ tmpTransform +'translate3d('+ ((currCoords[0])/currScale) +'px, '+ ((currCoords[1])/currScale) +'px, 0px) '
});

Por edhe kjo nuk është e saktë, ka probleme me thirrjet e përsëritura..

Pra, a ka ndonjë mënyrë se si të merret vlera e saktë e shkallës css3 vie javascript? A ka ndonjë mënyrë për të marrë vlerën e saktë të përkthimit CSS3 përmes js? Aktualisht po marr vetëm matricë me këto vlera, sigurisht që mund ta analizoj, por shpresoj se ka zgjidhje më të mirë.

Dhe së fundi.. Unë supozoj se -webkit-transform: matrix(...) nuk është harduer i përshpejtuar në iPad, kështu që mënyra e vetme është matrix3d? për të kombinuar saktë të gjitha këto transformime pa probleme..

Faleminderit shumë, shpresoj të kuptoni pyetjet e mia :)

javascript ipad jquery css css-transforms
15.10.2011

Përgjigjet:


1

Ju duhet të manipuloni matricën në mënyrë që të arrini atë që dëshironi të bëni:

   var transform = new  WebKitCSSMatrix(window.getComputedStyle(element).webkitTransform);
   transform = transform.rotateAxisAngle(0,0,0,45)
   element.style.webkitTransform = transform;

Metodat për manipulimi i WebkitCSSMatrix janë:

.multiply()
.inverse()
.translate()
.scale()
.rotate()
.rotateAxisAngle()
.skewX()
.skewY()

Dhe mund të shikoni një demonstrim këtu:

http://jsfiddle.net/6jGaA/

15.10.2011
  • A ka ndonjë alternativë që funksionon në shfletues të tjerë? 30.07.2014

    • 2

    Unë jam i ri në dizajnin e uebit, por nuk jam një Google fillestar.

    Për të kombinuar transformimet, duhet të vendosni të gjitha transformimet në të njëjtën linjë kodi.

    Ky artikull e shpjegon: http://www.htmlgoodies.com/beyond/css/css3-features-every-web-designer-is-excited-about-skewed-rotated-and-scaled-text.html.

    Pasazhi për të cilin po flas është afër fundit.

    Kombinimi i transformimeve

    Transformimet CSS në vetvete janë të dobishme, por fuqia e tyre e vërtetë zbulohet kur i kombinoni së bashku dhe merrni rezultate të jashtëzakonshme. Sa herë që i kombinoni, mbani mend se duhet të përcaktoni të gjitha transformimet në një rresht. Këtu është sintaksa e mostrës:

    #rotate-skew-scale-translate {
transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}
    25.05.2012
    Materiale të reja
    Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
    Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
    Faketojeni derisa ta arrini me të dhënat false
    A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
    Si të përdorni kërkesën API në Python
    Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
    Një udhëzues hap pas hapi për të zotëruar React
    Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
    AI dhe Psikologjia — Pjesa 2
    Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
    Esencialet e punës ditore të kodit tim VS
    Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
    Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
    Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..