Заказать сайт
Поиск
Instagram
Уроки
Телеграм-канал
Ресурсы
YouTube
Портфолио
+2
Модификации
Заказать сайт
Смотрите обучающее видео на YouTube канале

3D-эффект для стандартных карточек

Technical consulting, testing and communication
Technical department
Providing managing and coordination skills
Management department
Boosting professional skills and expertise
Professional department
Найти
Для более удобного поиска, вы можете ввести номер блока в поле ниже и подтянется вся информация по нему
Введите номер блока
Вкладка "Плитка и ссылка" из библиотеки блоков


<!--https://dsgnmax.ru/3d-effects-standart-card-->
<style>
/*3D-эффект для карточек стандартных блоков*/
:root{
    --perspective: 600px;       /*Значение перспективы для родительского контейнера*/
    --transformNorm: rotateX(12deg) rotateY(0deg) rotateZ(0deg);    /*Поворот карточки в нормальном состоянии*/
    --transformHover: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(30px);    /*Поворот карточки при наведении*/
    --transition: 0.3s ease-in-out;     /*Скорость и плавность анимации*/
}
@media screen and (min-width:1200px){
    .t983__row{     /*Класс контейнера*/
        perspective:var(--perspective); 
        -webkit-perspective:var(--perspective);
        overflow: visible !important;       /*Чтобы карточка не обрезалась*/
        background-color: transparent !important;
    }
    /*Обычное состояние карточки*/
    .t983__col{   /*Класс карточки*/
        transform: var(--transformNorm);  
        -webkit-transform: var(--transformNorm);
        transition: var(--transition);
        -webkit-transition: var(--transition);
    }
    /*Искажение карточки при наведении*/
    .t983__col:hover{ /*Класс карточки*/
        transform: var(--transformHover);
        -webkit-transform: var(--transformHover);
    }
}
</style>
Made on
Tilda