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>