In CSS3, le animazioni sono state introdotte sotto i vari prefissi dei fornitori, con le proprietà di transizione. Ora, almeno nel CSS puro ci sono due modi per far cambiare posizione ad un elemento.Qual è la trasformazione CSS: la proprietà translate() alla fine?
- Regolazione della posizione dell'elemento come assoluto e violino con
left:right:top:ebottom: - Utilizzando
-vendor-transform:translate(X,Y,Z)
Ora, rigorosamente sul punto di transform:translate(), a parte la capacità di utilizzare translateZ(), l'unico la differenza tra loro è che quest'ultimo non è un valore riportato; a parte l'analisi della proprietà stessa, la traduzione non è uno stile calcolato. Tuttavia, se ciò non fosse necessario, lo è effettivamente la scelta migliore per gli elementi di animazione e posizionamento altrimenti presenti in una configurazione position:fixed?
Sono particolarmente interessato a creare una webapp abbastanza pesante che deve essere eseguita su dispositivi mobili e browser in modo che la retrocompatibilità dei risultati non sia un problema. I browser mobili in questi giorni tendono ad essere almeno 'moderni'.
Quindi, in definitiva, la mia domanda è, , che cosa è esattamente transform:translate() per, secondo i produttori delle specifiche CSS3? Dove è stato costruito per essere utilizzato su trasformazioni LRTB e sarebbe possibile utilizzarlo in un modo sensibilmente superiore per ottenere velocità di rendering, fluidità di animazione e stabilità visiva quando si utilizza l'accelerazione hardware (-webkit-transform: translateZ(0);) ? Per coloro che non lo sanno, a volte negli elementi webkit si può sfarfallare in ambienti con accelerazione hardware.
In ogni caso, sto solo cercando le soluzioni di layout migliori e più aggiornate per le mie app Web che possono sfruttare CPU e GPU in modo più efficace in modo che possano essere eseguite su FPS ottimizzati molto bene (per quanto riguarda le transizioni e, in alcuni casi, lo scorrimento è interessato) Un grande esempio del tipo di scorrevolezza che sarebbe più desiderabile è questo http://www.webkit.org/blog-files/leaves/ (sì, ho letto la sua fonte.)
Qualsiasi input?
possibile duplicato del [Qual è la differenza tra CSS3 metodo e CSS2 posizionamento relativo tradurre? ] (http://stackoverflow.com/questions/10007093/whats-the-difference-between-css3-translate-method-and-css2-relative-positionin) – Blender
Conosco la differenza, voglio conoscere i loro scopi sul altro. – TERMtm
Non esiste la proprietà 'translate' * *. Esiste una funzione 'translate' ** ** per la proprietà' transform' che è una trasformazione della matrice, che consente la manipolazione 2D e 3D (trasla, ruota, inclina). – zzzzBov