背面可见性选择器对我不起作用

Question

我正在创建一个带有响应悬停的菜单的首页。 backface-visibility 属性对我不起作用。我想旋转圆并在悬停时显示后圆。我确信有一个简单的答案，但我现在花了很多可笑的时间试图让它发挥作用。

我已经尝试在容器上包含 backface-visibility: hidden; - 实际上在每个级别，但没有效果。 Chrome、Firefox 和 Opera 中的行为相同。其他浏览器没试过。

密码笔是here。

当我悬停时，我希望看到后面的圆圈（蓝色），但我看到的是前面的圆圈（黄色）。

<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>

CSS 在这里：

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

我希望圆圈旋转为蓝色，但它保持黄色。

Answer 1

查看我的pen
我在.circle 上添加了transform-style: preserve-3d; 并删除了backface-visibility: hidden;

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

我在.back-circle 上添加了position:absolute

.back-circle {
    background: blue;
    transform: rotateX(0deg);
    transform: rotateY(180deg); 
    position: absolute;
    top: 0;
}