Я пытаюсь сделать эффект зеркального отображения 3D-карты с помощью CSS, как на примере ниже.
Разница заключается в том, что я хочу использовать чистый CSS для реализации эффекта.
Ниже мой код:
/*** LESS: ***/
.card-container {
position: relative;
height: 12rem;
width: 9rem;
perspective: 30rem;
.card {
position: absolute;
width: 100%;
height: 100%;
div {
position: absolute;
height: 100%;
width: 100%;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
backface-visibility: hidden;
transition: transform 1s;
&:hover {
transform: rotateY(180deg);
}
}
}
}
После попыток, в течение нескольких часов, я смог получить только следующий эффект:
Можно ли реализовать этот эффект card flip, используя только CSS?
комментарии:
"front" не получает анимации. Установите его вращение на 180, 360 при наведении на него. Положение 360 градусов должно быть похоже на 0, но при этом должно поддерживаться то же направление вращения. - @Yemachu
источник: 3D flipping card
Ответ
Я упростил код, чтобы сделать его короче. Было несколько вопросов, и ниже, на рисунке, как они выглядят:
передняя поверхность не поворачивается при наведении курсора мыши
hover эффект запуcкается, при наведение курсора на .back div .
Это может создать мерцание, а затем div вращается. Это лучше, чтобы
запустить анимацию, иначе родитель зависнет.
первый родитель не очень полезен, так что я убрал его.
Ниже приведен пример простого эффекта CSS, только flipping card флип анимация запускается при наведении курсора мыши:
.card {
position: relative;
width: 9rem; height: 12rem;
perspective: 30rem;
}
.front, .back {
position: absolute;
width: 100%; height: 100%;
transition: transform 1s;
backface-visibility:hidden;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
transform: rotateY(180deg);
}
.card:hover .front{ transform: rotateY(180deg); }
.card:hover .back { transform: rotateY(360deg); }
Ответил: web-tiki
Комментариев нет:
Отправить комментарий