Paul Lewis animó un Flip Card 3D. Lo suficientemente sencillo allí, pero esto también necesitaba un elemento de sombra:
Es posible que la sombra necesite moverse o desvanecerse, por lo que necesitamos una solución que podamos animar con transformaciones y opacidad, ya que se pueden transferir a la GPU. Deberá estar separado del elemento que está sombreando, ya que es probable que queramos desvanecerlo y moverlo sin afectar al otro elemento.
El intentó box-shadow y filter: blur(), pero ambos no son lo suficientemente eficaces.
Probó un elemento SVG con un filtro de desenfoque, pero SVG por sí solo no puede hacer una escala de 9 cortes (necesaria para evitar que las esquinas escalen de manera incómoda).
El ganador estaba usando una imagen SVG pero aplicándola a un elemento a través de border-image, que esencialmente escala de 9 cortes.
Enlace directo →