Verwenden von `calc()` vs `transform 'beim Platzieren von Elementen

Question

Gibt es einen Grund, calc() über die transform -Eigenschaft zu verwenden, wenn ein Element platziert wird, oder umgekehrt, wenn die Größe des Elements bekannt ist?

Zum Beispiel ...

.element { 
    bottom: 100%; 
    transform: translateY(-9px); 
} 

Erzeugt die gleichen Ergebnisse wie:

.element { 
    bottom: calc(100% + 9px); 
} 

Wenn die Größe des Elements nicht bekannt ist, habe ich den Vorteil der Verwendung transform sehen. Wenn die Größe jedoch bekannt ist (wie oben), kann ich einfach calc() anpassen.

"calc() verwendet nur eine Zeile, während transform erfordert zwei Linien"

Fair enough. Aber (in meinem Fall) Ich verwende bereits transform entlang der anderen Achse einzustellen (weil ich nicht kennen die Anfangsgröße), so konnte ich leicht die translateY() und translateX() kombinieren, um tatsächlich die Anzahl der Zeilen zu reduzieren .

"Weil Browser-Unterstützung"

Angenommen wir über beide Lösungen vollständig Browser-Unterstützung haben.

Gibt es einen Standard oder eine Leistungssituation, die nahelegen, dass eine Lösung besser ist als die andere?

Answer 1

transform ist ein Monster, das viel mächtigere Dinge tun kann als einfache Übersetzungen.

Daher hat es einige Nebeneffekte wie das Erstellen eines umschließenden Blocks für seine Nachkommen, selbst wenn sie sich in einer festen Position befinden!

Daher, als Faustregel, wenn Sie nur einfache Übersetzungen wollen, würde ich empfehlen, transform zu vermeiden. Ich bevorzuge calc(), Ränder usw.

Answer 2

Transformationen können durch andere Transformationen beeinflusst werden, die einen Unterschied im Rendering verursachen können. Wenn Sie beispielsweise die perspective Transformation verwenden, würde translateY() innerhalb dieser Perspektive stattfinden. Also würde die Perspektive angewendet werden, und dann würde das Element entsprechend dem von Ihnen eingestellten Fluchtpunkt transformiert werden. Wenn Sie calc() verwenden, wird das Element stattdessen unabhängig von der festgelegten Perspektive auf der Seite positioniert. Es ist wahrscheinlich ein subtiler Unterschied, aber es ist da.

Wenn Sie keine 3D-Transformation wie perspective verwenden oder translate() die einzige Transformation ist, die Sie verwenden, glaube ich nicht, dass es einen Unterschied gibt.