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

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

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

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

See the Pen Dizziness room by yoksel (@yoksel) on CodePen.

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

See the Pen Disco lights on flying cube by yoksel (@yoksel) on CodePen.

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

See the Pen Lace cube by yoksel (@yoksel) on CodePen.

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

See the Pen Red lace cube by yoksel (@yoksel) on CodePen.

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

See the Pen Water cube by yoksel (@yoksel) on CodePen.

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

See the Pen Wire Ball by yoksel (@yoksel) on CodePen.

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