I am trying to realize a flipping card menu using only HTML & CSS. It is almost done except that the back side of the card takes time to display when receiving the first hover state. It's kind of doing the smooth transition move just for 90deg, then it goes instantly to display the final outcome (No more smooth transition done for the last 90deg).
After the first hover, everything goes fine.
Any suggestions?
EDIT: the snippet below has been edited to fit the correct answer.
@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>