0

I'm creating a front page with a menu responding to hover. The backface-visibility property just doesn't work for me. I want to rotate the circle and show the back-circle on hover. I'm sure there is a simple answer, but I've now spent a ridiculous amount of time trying to get it to work.

I have tried including the backface-visibility: hidden; on the container - in fact at every level, but no effect. The same behaviour is in Chrome, Firefox and Opera. Not tried in other browsers.

The codepen is here.

When I hover, I expect to see 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 is here:

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);
    }
}

I am expecting the circles to rotate to blue, but it stays yellow.

SgtSunshine
  • 13
  • 6

1 Answers1

0

Check my pen
I added transform-style: preserve-3d; and removed backface-visibility: hidden; on .circle 

.circle {                     
  display: inline-block;
  transform-style: preserve-3d;
}

and I put a position:absolute on .back-circle 

.back-circle {
    background: blue;
    transform: rotateX(0deg);
    transform: rotateY(180deg); 
    position: absolute;
    top: 0;
}
mootookoi
  • 82
  • 6
  • Thanks mootookoi. Obvious when you point it out, but I would have been floundering for hours, days and weeks. I now need to figure out exactly what transform-style actually does. I've looked at a few descriptions, but it is still not exactly clear. Thanks again. – SgtSunshine Jul 01 '19 at 12:32