Прокрутите — морской контейнер NEW WAY повернётся, ближняя стенка станет стеклянной, и вы увидите, как груз укладывается внутри. Технический разрез на чистом CSS-3D — без 3D-моделей и WebGL.
Морской контейнер NEW WAY — единица всего пути. Разворачиваем под удобный угол, чтобы заглянуть внутрь.
Ближняя длинная стенка становится прозрачной — как на инженерной схеме. Внутренний объём виден целиком.
Считаем объёмный вес и расставляем места ярус за ярусом — без пустот и перекосов. 92% полезного объёма.
До 28 тонн и 67 м³ — закреплено, опломбировано и застраховано. Один подрядчик ведёт контейнер весь путь.
CSS 3D transforms — коробка из шести граней в transform-style: preserve-3d; каждая грань центрируется (translate(-50%,-50%)) и выдвигается по своей оси через rotate* + translateZ. Ближняя длинная грань — стеклянная (cutaway), сквозь неё виден груз: 5 мини-контейнеров, тоже корректные CSS-3D-боксы. Текст набран нормально — «NEW WAY» на дальней грани читается правильно благодаря rotateY(180deg), никаких scaleX(-1). Скролл — режиссёр: закреплённая секция (ScrollTrigger pin + scrub) проигрывает один GSAP-таймлайн (поворот → стекло раскрывается → груз поднимается ярусами → статистика и шкала загрузки), заголовки разбиты SplitText. will-change: transform только на крутящемся .box. Всё в gsap.matchMedia(): при prefers-reduced-motion: reduce контейнер сразу показан в раскрытом виде с грузом и цифрами — без пина, скраба и Lenis.NEW WAY · песочница мокапов · 09 — контейнер