CSS переходной вопрос перехода

Question

Я пытаюсь реализовать меню карточек с использованием только HTML и CSS. Это почти сделано, за исключением того, что обратная сторона карты требует времени для отображения при получении первого состояния наведения. Это своего рода плавный переход только на 90 градусов, после чего он мгновенно отображает конечный результат (более плавный переход не выполняется для последних 90 градусов).

После первого наведения все идет хорошо.

Есть предложения?

РЕДАКТИРОВАТЬ: фрагмент ниже был отредактирован, чтобы соответствовать правильному ответу.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
.main{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
    background-color: #000;
}
.header{
    color:white;
    font-size: 2vh;
    margin-bottom: 2vh;
}
.header a{
    text-decoration: none;
    color: white;
    font-weight: bold;
}
.card{
    background-color: transparent;
    width: 30vh;
    height: 50vh;
    perspective: 1000px;
    perspective-origin: center;
    margin-right: 0.5vh;
    
    

}
.card > .card-container{
    position: relative;
    width: 100%;
    height: 100%;
    transition: 1s transform ease; 
    transform-style: preserve-3d;
    background-color: transparent;
}
.card:hover > .card-container{
    transform: rotateY(180deg);
}
.card-container > .front,.card-container > .back {
    width: 100%;
    height: 100%;
    position: absolute;  
    top: 0;
    left: 0;
}
.card-container > .front{

    background-image: linear-gradient(to bottom right,red, yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5vh;
    color: white;
    font-size: 3vh;
    cursor: pointer;
    backface-visibility: hidden;
}
.card-container > .back{
    
    background-color: transparent;
    color: white;
    font-size: 3vh;
    transform: rotateY(180deg);
    cursor: pointer;
   
}


.back > ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    perspective-origin: center ;

}

.back > ul > li{
    
    text-align: center;
    height: calc(100% - (0.2vh * 4) /5);
    width: 100%;
    transition: 1s transform ease;
    transform-style: preserve-3d;
    
}
.back > ul > li:not(:last-child){
    
    margin-bottom: 0.2vh;
}

.back > ul > li > .child-front, .back > ul > li > .child-back {
    
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    border-radius: 0.5vh;
}
.back > ul > li > .child-front{
    background-image: linear-gradient(to bottom left,red, orange);
    display: flex;
    justify-content: center;
    align-items: center;
}
.back > ul > li > .child-back{
    background-color: orange;
    transform: rotateX(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.back > ul > li:hover{
    
    transform: rotateX(180deg);
}


.child-back span, .child-front span{
    color: white;
    display: block;
}
.child-back span{
    font-weight: bold;
}

<div class="main">
            <div class="header">
                Find me on <a href="https://github.com/ican17/flipmenu">Github</a>
            </div>
            <div class="card">
                    <div class="card-container">
                            <div class="front">
                                <span>Hover here</span>
                            </div>
                            <div class="back">
                                <ul class="menu">
                                    <li class="child">
                                        <div class="child-front"><span>Hover here</span></div>
                                        <div class="child-back"><span>ITEM1</span></div>
                                    </li>
                                    <li class="child">
                                        <div class="child-front"><span>Hover here</span></div>
                                        <div class="child-back"><span>ITEM2</span></div>
                                    </li>
                                    <li class="child">
                                        <div class="child-front"><span>Hover here</span></div>
                                        <div class="child-back"><span>ITEM3</span></div>
                                    </li>
                                    <li class="child">
                                        <div class="child-front"><span>Hover here</span></div>
                                        <div class="child-back"><span>ITEM4</span></div>
                                    </li>
                                    <li class="child">
                                        <div class="child-front"><span>Hover here</span></div>
                                        <div class="child-back"><span>ITEM5</span></div>
                                    </li>
                                </ul>
                            </div>
                    </div>
                    
            </div>
    </div>

Answer 1

Удалить backface-visibility: hidden;:

.card-container > .front,.card-container > .back {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
}

На самом деле он вращается 180deg, но из-за backface-visibility вы не видите всего преобразования. Он показывает вам после окончания поворота.