Question

我正在创建一个带有响应 hover 的菜单的首页。 backface-visibility 属性对我不起作用。我想旋转圆圈并在悬停时显示后圆圈。我敢肯定有一个简单的答案，但是现在我花了很多荒谬的时间来尝试使它起作用。

我尝试将 backface-visibility：hidden; 包含在容器中-实际上在每个级别上都没有作用。在Chrome，Firefox和Opera中，行为相同。没有在其他浏览器中尝试过。

codepen是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
我在transform-style: preserve-3d;上添加了backface-visibility: hidden;并删除了.circle

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

然后我在position:absolute上放了一个.back-circle

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

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

1 个答案: