Карточки
Переворачивающаяся карточка
3D-карточка с двумя сторонами: спереди фото с подписью, сзади описание и ссылка. Переворачивается по клику, клавише или наведению вокруг вертикальной или горизонтальной оси. Своё содержимое обеих сторон можно передать children-пропсами.
Что можно поменять
- image, eyebrow, title, text, linkLabel, linkHref или полностью свои front и back
- trigger (click | hover), axis (y | x), aspect, width, hint, flipped
- accent, tone, радиус и длительность через переменные --vibeui-flip-001-radius и -duration
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/flip-001?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради состояния. Внешний блок держит perspective:1400px, карточка — transform-style:preserve-3d и transition transform .8s cubic-bezier(.2,.8,.2,1); при data-flipped карточка получает rotateY(180deg) (или rotateX для axis=x). Стороны — absolute inset:0 с backface-visibility:hidden и translateZ(1px), обратная заранее повёрнута на 180°. Скрытая сторона получает атрибут inert, чтобы Tab не попадал на невидимую ссылку. trigger=hover переворачивает через :hover без состояния. Ссылка на обороте гасит клик (stopPropagation), чтобы не переворачивать карточку обратно. Палитра --vibeui-flip-001-* с light-dark; шрифт Manrope через <link precedence>. Пропорции и ширина — переменные --vibeui-flip-001-aspect и -width из props aspect и width (по умолчанию 22rem, max-width:100%).
Теги
- flip
- flip card
- 3d
- card
- rotate
- two-sided
- reveal
- backface
- hover
- click
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…