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

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

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

Эффект работает для блока SV403 из раздела «Услуги» на десктопной версии. Аналогичный эффект, но с вертикальным флипом можно найти тут →
Modifications
Modifications
Modifications
Focus on Typography
Every block is perfectly balanced to make the reading an enjoyable experience.
When it comes to content delivery, you want it as effective as possible. We've made a lot of blocks to suit any kind of content, which allows you to present things exactly as they should be - stylish and easily digestible. We've taken care of all typographic elements: set the line length, leading, font sizes. We love typographic composition and we know how to rock it.

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

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