Рассмотрим задачу немного со стороны. Допустимс мы команда разработчиков(или один разработчик это не важно) получили задание сделать сайт согласно картике приложеной выше, может быть есть еще описание поведение элементов, анимации или даже разбиение анимции по кадрово в зависимости от действий пользователя. Так же допустим у нас нет ни каких ограничений по срокам, технологиям итд. Есть задача, заказщик хочет результат а дальше творите. У нас есть несколько вариантов дальнейших дествий.
1) В лоб, от восприятия - дизайна. Мы понимаем, что элементы оформления это по сути 3D сцена с построением перспективы и простой физикой света.
Тогда мы можем:
* Вынести всю графику в отдельный слой. Пусть в данном случае это будет canvas
* В другом слое достатчно просто сформировать контентное наполнение сайта
Для работы с 3D сценой мы можем или взять готовую библиотеку или сделать собственное решение которое будет растеризировать нам эту сцену на плоскость которую мы можем встроить в верстку - canvas. Допустим мы решили не тратить свое время и нас устраивает имеющееся решение мы берем бибилотеку. Например мы взяли THREE.js. Мы позиционируем canvas так чтобы вписать будующую сцену в дизайн. С помощью javascript и решения которое мы выбрали отрисовывается необходимая нам 3D сцена, если нужно добавля логику в зависимости с реакцией пользователя (движение мыши итп). Поверх canvas мы позиционируем наш статический сайт (текст кнопочки итд). Для реализации мы использовали (в минимальном исполнении) html, css, js, возможно так же шейдеры и 3D модели если не получилсоь обойтись примитивами.
2) В лоб, от декомпозиции - логики компонентов, процесса.
Мы хотим раздробить проект на компоненты и реализовывать покомпонентно, или мы понимаем, что каждый элемент интерфеса должен быть абсолютно самостоятельным. возможно этим будут заниматься разные разработчики. Тогда скорее всего если не было предварительно договорености. то каждый разработчик выберет наиболее интересный или простой для него способ реализации компонента. И в итоге мы получим солянку из кучи билиотек и технологий. Главное потом на финальном этапе скородинировать логику компонентов. Использованые технологии (html + css + js + то что мы посчитали нужным в каждом конкретном компоненте)
3) В лоб от технологий.
Мы говорим что у нас есть ограниченый набор технологий которые мы можем использовать. Минимально необходимый набор технологий для реализации подобного как на картинке html и css. Но более кофортным будет html, css и svg. Мы ограничили набор технологий и от примитивного к более сложным визуальным конструкциям реализовываем. Используя способы обмана восприятия пользователя чтобы добится эфектов трехмерности, существования сцены и освещения итд.
Выше я очень кратко описал разные варианты подходов к созданию единой концепции восприятия пользователем. Сушествует еше бесконечно много подходов и способов реализовать процес разработки. Выбор и наполнение каждого конкретно зависиот отконкретной задачи, различных условий и исполнителя. Зачем я длинный ответ? Чтобы дать понять Единого иструмента (серебряной пули) на все случаи нет, всегда приходится идти от множества факторов. Глядя же только на картинку я бы чисто визуальную сцену в canvas использовав тот же THREE.js и отдельно поверх сцены спозиционировал все управление и текст. Если это не статика и если нет развесистой логики поведения элементов и отображения. там уже стоит думать дальше.
