<!--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>