Как сделать flip-карточку, которая работает не только по hover
Переворот карточки требует своего кода: в исследованном рантайме Тильды нет готовой механики rotateY для пары сторон. Но главный риск не в CSS, а в управлении. Hover работает только с мышью, поэтому на телефоне и с клавиатуры нужна настоящая кнопка. Скрытая сторона должна исчезать из Tab-порядка, а при уменьшении движения эффект заменяется простой сменой содержимого.
Короткий ответ
Соберите лицевую и обратную группы, объедините их одной обёрткой и управляйте состоянием кнопкой. Hover оставьте дополнительным способом.
Подготовка в Zero Block
Обе стороны должны иметь одинаковую внешнюю площадь. Внутри можно менять композицию, но важный текст не помещайте только на оборот без явной подсказки «Показать подробнее».
Каждой карточке нужен собственный экземпляр состояния. Повторяющиеся глобальные id приводят к тому, что клик по третьей переворачивает первую.
3D-слой
Перспектива задаётся внешней обёртке, вращается внутренний контейнер, а стороны
получают backface-visibility. Не назначайте transform элементу, на котором уже
работает пошаговая анимация Zero Block: два эффекта будут переписывать одно
свойство.
Доступность
Кнопка хранит aria-expanded или другое понятное состояние. Когда оборот скрыт,
его ссылки исключаются из Tab-порядка. После переключения фокус остаётся на
кнопке или осознанно переходит в новое содержимое.
При prefers-reduced-motion не вращайте плоскость в 3D — переключайте стороны
мгновенно. Смысл остаётся, декоративное движение исчезает.
Статус MOD-190
Спецификация добавлена в каталог, но сниппет ещё не прошёл Safari, touch, клавиатуру и экранный диктор. Для клиента закладывайте реализацию и тестирование, а не называйте карточку готовой.