Przekształcenie CSS vs pozycja

Question

Czy niektórzy mogą wyjaśnić mi różnicę w przenoszeniu położenia obiektów left lub lub -transform: translateX(n), ponieważ oba wydają się osiągnąć to samo, ale mogą być stosowane niezależnie. Rozumiem możliwość przyspieszenia sprzętowego, ale to zależy od implementacji.

// psuedo code; 

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

// javascript 

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

Jaka jest przewaga jednej nad drugą? Dzięki

p

Answer 1

top i left właściwości CSS działa tylko na elementach umieszczonych relative, absolute lub fixed. Również właściwości top i left opierają się na pozycji rodzica (względnej, bezwzględnej lub statycznej). Tłumaczenia nie mają wpływu na te ustawienia.

---

przemiany Translation są "identyczne" zastosowaniu top i left gdy element ma position: relative. W każdym innym przypadku nie są to te same operacje.

Answer 2

Pozycja jest zależna od ustawienia position, transform działa z samego elementu. Tak więc można może zobaczyć transform jako identyczne z position:relative;.

Jednak nadal można używać transform na absolutnie elementu pozycjonowanego (aby ustawić go stosunkowo bez konieczności dodatkowego elementu lub uciekania się do marginesów), a także transform będąc CSS3 więc jeśli można użyć position zamiast powinieneś.

Answer 3

Jest dobry artykuł: Why Moving Elements With Translate() Is Better Than Pos:abs Top/left