CSS 3d transforms happen on a different thread and don't block main thread. Whilst with WebGL you still have to do some work on the JS thread. So I would say CSS animations are faster.

I imagine the browser is better able to limit the redraw behavior of CSS effects. WebGL will render as long as your tab is open (though as others have said, the speed is probably better in WebGL).

Definitely not more efficient. The only thing JS would need to do here is updating a 4x4 matrix. Everything else would be in the GPU.

in Safari on iOS 16 the effect is clearly bugged, showing a weird tiling artifact on the front of the cards

I am very sure that the Firefox/Chrome developers have written more efficient GPU accelerated rendering for CSS then I am likely to bother writing in yet another custom WebGL renderer.

I am also sure that a dedicated renderer optimized for one subject _could_ be even more efficient.

We are sure it isnt, see my other post https://news.ycombinator.com/item?id=33365694 or just look at CPU utilization while flipping those cards.