Paul Lewis hat eine 3D-Karten-Flip animiert. Das ist eigentlich recht einfach, aber hier war auch ein Schattenelement nötig.
Der Schatten muss sich möglicherweise bewegen oder ausblenden, daher benötigen wir eine Lösung, die wir mit Transformationen und Deckkraft animieren können, da diese an die GPU übergeben werden können. Sie muss separat von dem Element sein, das sie beschattet, da wir sie wahrscheinlich aus- und einblenden und bewegen möchten, ohne das andere Element zu beeinflussen.
Er versuchte es mit box-shadow und filter: blur(), aber beides war nicht performant genug.
Er versuchte es mit einem SVG-Element mit einem Weichzeichnerfilter, aber SVG allein kann kein 9-Slice-Scaling durchführen (was notwendig ist, um zu verhindern, dass sich die Ecken ungeschickt skalieren).
Der Gewinner war die Verwendung eines SVG-Bildes, das jedoch über border-image auf ein Element angewendet wurde, was im Wesentlichen 9-Slice-Scaling ist.