Заявка на разработку сайта
Наживая кнопку вы соглашаетесь на обработку персональных данных

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

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

Эффект работает для блока SV403 из раздела «Услуги» на десктопной версии. Аналогичный эффект, но с вертикальным флипом можно найти тут →
Modifications
Modifications
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.
Magic
We help startups to create the visual identity, according to our marketing research. We know design and business trends and use them masterfully.

Инструкция

  1. Создаём блок SV403. Добавляем в него нужную информацию, текст, иллюстрации. 
  2. В настройках блока настраиваем размер шрифтов, цвет, стиль кнопок. 
  3. Код ниже вставляем в блок 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>
Было полезно?
Made on
Tilda