Эффект 3D-разворота
для карточек при наведении

<script>
$(document).ready(function () {
// Получаем цвета обводки для кнопок и добавляем их в атрибуты
$('[data-elem-type="button"] .tn-atom').each(function () {
var borderColor = $(this).css('border-color'); // Получаем цвет обводки
$(this).attr('data-border-color', borderColor); // Добавляем атрибут с этим цветом
});

setTimeout(function () {
var totalCards = $('[class*="tistols-card-wrapper-"]').length;
console.log('Количество карточек: ' + totalCards);

// Для каждой карточки
for (var i = 1; i <= totalCards; i++) {
console.log('Обрабатываем карточку с индексом: ' + i);

var backElement = $('[class*="tistols-card-back-' + i + '"]');
var faceElement = $('[class*="tistols-card-front-' + i + '"]');

if (backElement.length > 0 && faceElement.length > 0) {
var mainWrapper = $('.tistols-card-wrapper-' + i);

if (mainWrapper.length > 0) {
console.log('Найден контейнер для карточки ' + i);

var faceWrapper = $('<div class="tistols-card-front-wrapper-' + i + '"></div>');
var backWrapper = $('<div class="tistols-card-back-wrapper-' + i + '"></div>');

faceElement.appendTo(faceWrapper);
backElement.appendTo(backWrapper);

faceWrapper.appendTo(mainWrapper);
backWrapper.appendTo(mainWrapper);
} else {
console.log('Не найден контейнер для карточки с индексом ' + i);
}
} else {
console.log('Не найдены элементы для карточки с индексом ' + i);
}
}

// Применяем стили для кнопок на основе атрибутов
$('[data-elem-type="button"] .tn-atom').each(function () {
var borderColor = $(this).attr('data-border-color'); // Берём значение из атрибута
$(this).css('border-color', borderColor); // Устанавливаем его как стиль
});
}, 500);

// Переворот карточек по клику
$('[class*="tistols-card-wrapper-"]').on("", function () {
$(this).toggleClass('tistols-card-wrapper-active');
});

// Эффект при наведении
$('[class*="tistols-card-wrapper-"]').hover(
function () {
$(this).addClass('tistols-card-wrapper-active');
},
function () {
$(this).removeClass('tistols-card-wrapper-active');
}
);
});
</script>

<style>
[data-elem-type="button"] .tn-atom {
border-color: auto!important;
}
/* Карточки */
[class*="tistols-card-wrapper-"] {
cursor: pointer !important;
perspective: 1500px;
}

/* Лицевая и задняя стороны */
[class*="tistols-card-front-wrapper-"],
[class*="tistols-card-back-wrapper-"] {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
transition: transform 1.2s cubic-bezier(.34, 1.56, .64, 1);
}

/* Задняя сторона - перевёрнута изначально */
[class*="tistols-card-back-wrapper-"] {
transform: rotateY(-180deg);
}

/* Лицевая сторона - начальное положение */
[class*="tistols-card-front-wrapper-"] {
transform: rotateY(0deg);
}

/* Активное состояние карточки */
[class*="tistols-card-wrapper-"].tistols-card-wrapper-active [class*="tistols-card-front-wrapper-"] {
transform: rotateY(180deg);
}

[class*="tistols-card-wrapper-"].tistols-card-wrapper-active [class*="tistols-card-back-wrapper-"] {
transform: rotateY(0deg);
}
</style>