1
我有一個簡單的卡片翻轉動畫,在我測試的瀏覽器上運行良好。Safari CSS與疊加動畫的問題
然而,當這張卡片翻轉動畫發生在另一個也是動畫的div上時,Safari上還存在一個問題。出於某種原因,Safari在卡片翻轉時會消失在「背景div」後面。我認爲這可能是一個z-index
問題,但從我嘗試過的不是。
爲了使示例變得簡單,背景div是灰色的。這個想法是在背景中發光。
下面是我有的代碼示例,我已經在Chrome,Firefox和Edge上測試了它的工作正常,但是在Safari翻動它時消失。
$(document).ready(function() {
$('button').click(function() {
$('.wrapper').toggleClass('flip');
});
});
.perspective {
perspective: 1000px;
margin: 50px;
position: relative;
width: 175px;
height: 250px;
}
.some-bg {
background-color: #ccc;
background-position: center;
width: 100%;
height: 100%;
position: absolute;
animation: test-bg-animation 1s infinite linear;
}
@keyframes test-bg-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.wrapper {
width: 125px;
height: 175px;
border: 1px solid blue;
position: absolute;
transform-style: preserve-3d;
transition: all 250ms;
top: 35px;
left: 25px;
}
.wrapper.flip {
transform: rotateY(180deg);
}
.card-face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
}
.back {
background-color: tomato;
}
.front {
background-color: #bada55;
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="perspective">
<div class="some-bg"></div>
<div class="wrapper">
<div class="card-face front">Front</div>
<div class="card-face back">Back</div>
</div>
</div>
<button>Flip Me!</button>