5

Я пытаюсь сделать эффект зеркального отображения 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);
                }
            }
        }
    }
<div class="card-container">
  <div class="card">
    <div class="front"><span>Front</span></div>
    <div class="back"><span>Back</span></div>
  </div>
</div>

После попыток, в течение нескольких часов, я смог получить только следующий эффект:
введите сюда описание изображения

Можно ли реализовать этот эффект card flip, используя только CSS?

комментарии:

"front" не получает анимации. Установите его вращение на 180, 360 при наведении на него. Положение 360 градусов должно быть похоже на 0, но при этом должно поддерживаться то же направление вращения. - @Yemachu

источник: 3D flipping card

1

1 ответ 1

7

Я упростил код, чтобы сделать его короче. Было несколько вопросов, и ниже, на рисунке, как они выглядят:

введите сюда описание изображения

  • передняя поверхность не поворачивается при наведении курсора мыши

  • 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); }
<div class="card">
  <div class="front"><span>Front</span></div>
  <div class="back"><span>Back</span></div>
</div>

Ответил: web-tiki

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.