Transformación CSS frente a la posición

Question

¿Alguno puede explicarme la diferencia en la transición de las propiedades posicionales left o right o -transform: translateX(n), ya que ambas parecen lograr lo mismo pero se pueden aplicar independientemente. Entiendo acerca de la posibilidad de acelerar el hardware, pero eso depende de la implementación.

// psuedo code; 

#box { 
    -transition-property: all; 
    -transition-duration: 1s; 
} 

// javascript 

box.style.transform = "translateX(200px)"; 
vs 
box.style.left = "200px"; 

¿Cuál es la ventaja de una sobre la otra? Gracias,

p

Answer 1

top y left propiedades CSS trabajar solamente en elementos posicionados relative, absolute o fixed. Además, las propiedades top y left se basan en la posición del padre (relativa, absoluta o estática). Las traducciones no se ven afectadas por esa configuración.

---

transformaciones de traducción son "idéntica" a la aplicación de top y left cuando el elemento tiene position: relative. En cualquier otro caso, no son las mismas operaciones.

Answer 2

La posición depende de en qué se configura position, transform funciona desde el elemento en sí. De modo que podría ver transform como idéntico a position:relative;.

Sin embargo, todavía se puede utilizar transform sobre un elemento con posición absoluta (en la posición que sea relativamente sin necesidad de un elemento adicional o recurrir a los márgenes), así como transform ser CSS3 lo que si puede utilizar position lugar que debería.

Answer 3

No es buen artículo: Why Moving Elements With Translate() Is Better Than Pos:abs Top/left