СSS-градиенты и 3D

Сочетание CSS-анимации, трансформаций и градиентов может дать совершенно удивительные результаты. Не уверена, что подобное можно использовать в реальных проектах, но выглядит довольно эффектно.

Для перезапуска анимаций кликните Rerun в правом нижнем углу.

Самое простое сочетание градиентов и трёхмерного куба:

Конструкция посложнее: здесь для узора использованны анимированные тени:

Здесь просто градиенты:

Повторяющиеся градиенты:

Градиенты и изменение размеров граней

Попробовала сделать шарик, тоже из градиентов:

Получаются удивительные штуки, и наверняка когда-нибудь их можно будет использовать без ущерба для производительности.