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

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