Веб-стандарты
13.8K subscribers
6.42K photos
1 file
3.22K links
Новости фронтенда и еженедельный подкаст.

Простой способ сказать спасибо и попасть в закрытый чат:

— Патреон https://www.patreon.com/webstandards_ru
— Бусти https://boosty.to/webstandards_ru
Download Telegram
VoxCSS, воксельный движок на CSS. Рендерит HTML-кубоиды, сочетая слои на CSS-гридах и 3D-трансформации, создавая трёхмерные сцены в DOM без Canvas. Поддерживаются цвета, текстуры, взаимодействие, удаление скрытых частей, плюс фигуры и области. Работает не только с чистым JS, но и с Vue, React и Svelte. #css #3d

https://voxcss.com/
🔥46❤29👍8🎉6
CSS is DOOMed: рендеринг DOOM в 3D на CSS. Нильс Линхир создал версию классической игры, где каждый визуальный элемент — это <div>, расположенный в 3D-пространстве с помощью CSS-трансформаций, а JavaScript отвечает только за игровую логику. Проект использует тригонометрические функции CSS, @property для анимируемых кастомных свойств, anchor positioning для HUD и SVG-фильтры для призрачных врагов. #css #3d

https://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/
👍26🔥22❤5
Гайд по 3D в CSS: perspective, preserve-3d и translateZ. Кармен Ансио разбирает, как строить полноценные 3D-сцены в CSS, показывая переход от нарисованной глубины Super Mario Bros 3 к настоящей камере Super Mario 64. В обзоре: perspective и perspective-origin для установки камеры, preserve-3d для сохранения реальной глубины, переиспользуемые кубоиды, анимация камеры и translateZ, rotateX/Y/Z, scale3d и matrix3d. Все шесть свойств — Baseline. #css #3d

https://www.carmenansio.com/articles/3d-css-guide/
🔥13👍6❤2