Blank page

Подборка

Вход

Тарифы

Поддержка

Good design is obvious. Great design is transparent.

LET'S GO!

Curiosity about life in all its aspects, I think, is still the secret of great creative people.

Good design is obvious. Great design is transparent.

LET'S GO!

Создаем в зероблоке фронтальную часть карточки
Из примера: шейп подложка, текст, кнопка.
всем элеменатм задаем класс tistols-card-front-1 (цифра увеличивается для воторой карточки, тоесть будет уже tistols-card-front-2)
Всем элементам задать позиционирование по window контейнеру.

Создаем заднюю часть карточки
Из примера: шейп подложка, текст, шейп (желтый).
всем элеменатм задаем класс tistols-card-back-1 (цифра увеличивается для воторой карточки, тоесть будет уже tistols-card-back-2)
Всем элементам задать позиционирование по window контейнеру.

Выделяем все элементы фронтальной части - объединяем в группу
Выделяем все элементы задней части - объединяем в группу
Затем размещаем обе группы друг под другом , объединяем в группу и даем понятное название (карточка 1) и обязательно перемещаем в левый верхний угол холста

Для каждой карточки создаем бесцветный шейп с классом tistols-card-wrapper-1 (и так далее для всех карточек увеличивая цифру в конце класса)
и размещаем в любой части экрана, именно в этом элементе и будет карточка и вставляем код в блок T123

<script>
$(document).ready(function () {
  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);
      }
    }
  }, 500);

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

</script>



<style>
/* Карточки */
[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>