Горизонтальный поворот карточек

Разберёмся как сделать горизонтальный флип карточек в Tilda.

Эффект работает для блока SV403 из раздела «Услуги» на десктопной версии. Аналогичный эффект, но с вертикальным флипом можно найти тут →

Modifications

Демонстрация примера

Style

We can estimate your company opportunities, explore your economic status, analyze your vehicle access and foot traffic.

WOW

Life

We create specialists portraits, develop ways of training of personnel. We develop branding for new companies or rebrand products.

REALY?

Magic

We help startups to create the visual identity, according to our marketing research. We know design and business trends and use them masterfully.

WTF!

Инструкция

Создаём блок SV403. Добавляем в него нужную информацию, текст, иллюстрации.
В настройках блока настраиваем размер шрифтов, цвет, стиль кнопок.
Код ниже вставляем в блок T123.


<style>

@media screen and (max-width: 960px) {
    .t856__btn-wrapper {
        margin-top: 0px;
        padding-top: 20px;
        padding: 20px;
    }
    
    .t856__text {
        margin-top: 20px;
        margin-top: 0px;
        padding-top: 20px;
        padding: 20px;
    }
}

@media screen and (min-width: 960px) {
    .t856__container {
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
    
    .t856__btn-wrapper,
    .t856__text,
    .t856__table,
    .t856__link {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    
    .t856__btn-wrapper,
    .t856__text {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }
    
    .t856__table {
        position: absolute;
        /*высота карточки с изображением, должна совпадать с высотой текста с зади (строка 114)*/
        height: 320px !important;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    
    .t856__col:hover .t856__table {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    
    .t856__col:hover .t856__btn-wrapper,
    .t856__col:hover .t856__text {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    
    .t856__container {
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
  
    .t856__col {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .t856__text {
        box-sizing: border-box;
        display: block;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        margin-top: 0px;
        padding: 20px;
        padding-top: 40px;

    }
    
    .t856__btn-wrapper {
        display: block;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        box-sizing: border-box;
        margin: auto;
        position: absolute;
        bottom: 30px;
        width: 100%;
        padding: 0px 20px;
    }
    
    .t856__link {
        display: contents;
    }
    
  /*Оформление карточки*/
  
    .t856__col:hover .t856__btn-wrapper,
    .t856__col:hover .t856__text,
    .t856__col:hover .t856__table {
        /*Скорость вращения и стиль анимации при наведении*/
        -webkit-transition: all 0.4s ease-in-out !important;
        transition: all 0.4s ease-in-out !important;
    }
  
    .t856__btn-wrapper,
    .t856__text,
    .t856__table,
    .t856__col {
        /*Скорость и стиль анимации обратного вращения*/
        -webkit-transition: all 0.9s ease-in-out;
        transition: all 0.9s ease-in-out;
    }
    
    .t856__text {
        /*Высота карточек desktop должна совпадать с высотой изображения (строка 41*/
        height: 320px !important;
    }
}

.t856__btn-wrapper,
.t856__text {
    /*Цвет фона*/
    background-color: #2d343f;
    /*Цвет текста*/
    color: #ffffff;
}

</style>

Источник кода →

Было полезно?