Currently working on a homepage design that features a hover-responsive menu. Despite my efforts, the backface-visibility property doesn't seem to be cooperating. I'm attempting to rotate the circle and reveal the backside upon hover. I feel like there must be a simple solution to this issue, but I've already spent an excessive amount of time trying to figure it out.
I've experimented with applying backface-visibility: hidden; at various levels within the container, but it hasn't produced any results. This problem persists across Chrome, Firefox, and Opera - I haven't tested it in other browsers yet.
You can find the codepen link here.
Upon hovering, I anticipate seeing the back-circle (blue), but instead, I see the front-circle (yellow).
<div id="nav-container">
<div class="circle">
<div class="circle1 front-circle">First</div>
<div class="circle1 back-circle">1st back</div>
</div`>
<div class="circle">
<div class="circle1 front-circle">Second</div>
<div class="circle1 back-circle">2nd back</div>
</div>
</div>
The CSS section is provided below:
body {
overflow: hidden;
margin: 20;
height: 100vh;
background: #aaa;
}
.circle {
display: inline-block;
backface-visibility: hidden;
}
.circle1 {
position: relative;
height: 10rem;
width: 10rem;
/* background-color: #aaa; */
border-radius: 50%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front-circle {
background: yellow;
transform: rotateX(0deg)
}
.back-circle {
background: blue;
transform: rotateX(0deg)
}
.back-circle {
transform: translateY(-10rem);
transform: rotateY(180deg);
}
.circle:hover {
animation: rotate-btn 1s linear;
-webkit-animation: rotate-btn 1s linear;
animation-fill-mode: forwards;
}
@keyframes rotate-btn {
from {
transform: rotateY(0);
}
to {
transform: rotateY(180deg);
}
}
Even after implementing the rotation animations, the circles fail to switch to blue as intended and remain yellow instead.