3D зеркальное отображение карт

#css #html5 #css3 #анимация #css_animation

Я пытаюсь сделать  эффект зеркального отображения  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);
                }
            }
        }
    }

  

    
Front
    
Back
  





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

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

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

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

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

Ответы

Ответ 1

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

   


передняя поверхность не поворачивается при наведении курсора мыши    
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); }

  
Front
  
Back



   

Ответил: web-tiki