Здравствуйте. Пробую использовать данное правило совместно с transition и псевдоэлементами, но браузеры уж очень коряво рендерят анимацию. Вот результат
http://hismith.smartfreelancer.ru/
При наведении на столбец происходит вращение. Кто-нибудь решал уже такую проблему, и если да, то как?
Код:
Код:
|
.jaluzi {
display: flex;
flex-direction: row;
height: 90%; }
.jaluzi__elem {
width: 100%; }
.jaluzi__elem:hover .jaluzi__column-content {
transform: rotateY(180deg);
transition: transform 1s; }
.jaluzi__column-content {
background: linear-gradient(to right, #b2b6bc 0%, #f4f4f5 25%);
padding: 85px 0 0;
transition: transform 1s;
position: relative; }
.jaluzi__column-content:before {
content: "";
position: absolute;
background: url("../img/train.jpg") center no-repeat;
background-size: cover;
transform: rotateY(-180deg);
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0; } |