Я пытаюсь сделать анимацию сальто. У меня проблема в том, что backface-visible у меня работает в Chrome (81.0.4044.113), но не в Firefox (75.0). Я нашел эту проблему в Firefox, но даже преобразование элемента не сработало для меня.
let card = document.querySelector('#card');
card.addEventListener('click', function() {
if (card.style.transform === "rotateY(180deg)") {
card.style.transform = "rotateY(0deg)";
} else {
card.style.transform = "rotateY(180deg)";
}
});
#card {
cursor: pointer;
-webkit-transform-style: preserve-3d; /* Safari */
transform-style: preserve-3d;
}
#cardTaskHeader,
#cardSolutionHeader,
#cardTask,
#cardSolution {
-webkit-backface-visibility: hidden; /* Safari */
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
#cardHeader,
#card .card-body {
position: relative;
}
#cardSolutionHeader,
#cardSolution {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: rotateY(180deg);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card bg-light" id="card">
<div id="cardHeader">
<h2 class="card-header" id="cardTaskHeader">TaskHeader</h2>
<h2 class="card-header" id="cardSolutionHeader">SolutionHeader</h2>
</div>
<div class="card-body">
<h1 class="card-text" id="cardTask">Task</h1>
<h1 class="card-text" id="cardSolution">Solution</h1>
</div>
</div>
Как я могу это исправить?
Я уже пробовал:
- Проверено около 15 вопросы здесь и пробовали их решения, в том числе:
- Добавление
transform: rotateY(0deg)
ко всем возможным элементам. - Добавление
transform: rotateX(0deg)
ко всем возможным элементам. - Добавление
transform: translateY(0deg)
к все возможные элементы. - Добавление
transform: translateX(0deg)
ко всем возможным элементам. - Настройка
position: absolute
на #cardTask
и #cardTaskHeader