Селектор видимости задней поверхности не работает для меня - PullRequest
Новая
       16

Селектор видимости задней поверхности не работает для меня

0 голосов
/ 28 июня 2019

Я создаю первую страницу с меню, отвечающим на hover .Свойство backface-visibility просто не работает для меня.Я хочу повернуть круг и показать обратный круг при наведении.Я уверен, что есть простой ответ, но теперь я потратил смехотворное количество времени, пытаясь заставить его работать.

Я пытался включить backface-visibility: hidden; на контейнере - фактически на каждом уровне, но без эффекта.Такое же поведение есть в Chrome, Firefox и Opera.Не пробовал в других браузерах.

Кодовый код здесь .

Когда я нахожусь, я ожидаю увидеть задний круг (синий), но вместо этого я вижупередний круг (желтый). 

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

Я ожидаю, что круги повернуты в синий цвет, но он останется желтым.

1 Ответ

0 голосов
/ 28 июня 2019

Проверьте мою ручку
Я добавил 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;
}
...