По умолчанию карточки на сайте Tilda статичны — пользователь подводит курсор, и максимум что меняется, это цвет фона. На сайтах студий и портфолио часто можно увидеть другой эффект: карточка наклоняется в 3D вслед за курсором, как будто это физический объект. Это привлекает внимание и работает как тонкий брендинг.
Эффект работает в Zero Block с любыми карточками: услуги, тарифы, портфолио, команда. На телефонах автоматически отключается — там нет курсора, и наклон не нужен.
Важно: в Zero Block заголовок, цена, описание и кнопка карточки — это отдельные элементы, а не вложенные друг в друга. Поэтому нельзя повесить класс только на фон карточки — наклоняться будет только он. Нужно присвоить общий класс всем элементам одной карточки.

Как назначить классы.
Каждой карточке — свой номерной класс.

Откройте Zero Block с карточками
Кликните на фон первой карточки → шестерёнка → в поле CSS Class Name напишите tilt-1
Кликните на заголовок этой же карточки → tilt-1
Повторите для всех элементов первой карточки: цены, описания, кнопки
Для второй карточки используйте класс tilt-2, для третьей — tilt-3 и так далее
Сохраните блок

Главное правило: одна карточка = один общий номер класса для всех её элементов.
Как добавить код

Откройте нужную страницу в редакторе Tilda
Добавьте блок Т123 (HTML-код)
Вставьте в него скрипт (см. ниже)
Сохраните страницу

<script>
// gsp development
document.addEventListener('DOMContentLoaded', function() {
  if (window.matchMedia('(hover: none)').matches) return;

  var maxTilt = 15;
  var scale = 1.05;

  setTimeout(function() {
    var groups = {};
    document.querySelectorAll('[class*="tilt-"]').forEach(function(el) {
      var m = el.className.match(/tilt-(\d+)/);
      if (!m) return;
      (groups[m[1]] = groups[m[1]] || []).push(el);
    });
    Object.keys(groups).forEach(function(k) { initGroup(groups[k]); });
  }, 300);

  function initGroup(els) {
    var sx = window.pageXOffset, sy = window.pageYOffset;
    var l = Infinity, t = Infinity, r = -Infinity, b = -Infinity;
    els.forEach(function(el) {
      var rect = el.getBoundingClientRect();
      l = Math.min(l, rect.left + sx);
      t = Math.min(t, rect.top + sy);
      r = Math.max(r, rect.right + sx);
      b = Math.max(b, rect.bottom + sy);
    });
    var cx = (l + r) / 2, cy = (t + b) / 2;
    var box = { l: l, t: t, w: r - l, h: b - t };

    els.forEach(function(el) {
      var rect = el.getBoundingClientRect();
      var ex = rect.left + sx, ey = rect.top + sy;
      el.style.transformOrigin = (cx - ex) + 'px ' + (cy - ey) + 'px';
      el.style.transition = 'transform 0.25s ease-out';
      el.style.willChange = 'transform';
    });

    var hovering = false;
    document.addEventListener('mousemove', function(e) {
      var inside = e.pageX >= box.l && e.pageX <= box.l + box.w &&
                   e.pageY >= box.t && e.pageY <= box.t + box.h;
      if (inside) {
        var x = (e.pageX - box.l) / box.w;
        var y = (e.pageY - box.t) / box.h;
        var rx = (0.5 - y) * maxTilt;
        var ry = (x - 0.5) * maxTilt;
        var tr = 'perspective(1000px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg) scale(' + scale + ')';
        els.forEach(function(el) { el.style.transform = tr; });
        hovering = true;
      } else if (hovering) {
        els.forEach(function(el) {
          el.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
        });
        hovering = false;
      }
    });
  }
});
</script>

Настройка под себя: в первых строках скрипта можно изменить два параметра. maxTilt — сила наклона в градусах (по умолчанию 15; для крупных карточек портфолио лучше 8–10, для маленьких плиток можно 20+). scale — приближение карточки при наведении (по умолчанию 1.05 — мягко; 1.1 — выпрыгивающий эффект).