卡片翻转在 Safari 上不起作用。我认为这是因为CSS

Question

它在Chrome, Firefox, MS Edge上运行良好，但在safari上无法正常显示。Block应该是360度翻转并显示图像;然而，它只是变成空白的safari，我不知道是什么问题。感谢你阅读这篇文章!

这是我的反应脚本:

<div
className={
'aspect-w-1 aspect-h-1 bg-blue-500' + (img0 ? ' flip-card' : '')
}
onClick={() => setImg0(true)}
>
<img
src={posts && posts[0].image}
alt=''
className={
'object-cover object-center max-w-6/4 transition ease-in duration-1000' +
(img0 ? ' opacity-100' : ' opacity-0')
}
/>
</div>

这是我的CSS脚本:

@layer utilities {
.flip-card {
-ms-transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
-webkit-transition: transform 2000ms;
-ms-transition: transform 2000ms;
-moz-transition: transform 2000ms;
-o-transition: transform 2000ms;
transition: transform 2s;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
}

Answer 1

我弄清楚了，它在safari上不可见，因为我没有添加透视值

<div
className={
'aspect-w-1 aspect-h-1 bg-blue-500 card transition duration-[2000ms]' +
(img0 ? ' flip-card' : '')
}
onClick={() => setImg0(true)}
>
<img
src={posts && posts[0].thumb}
alt=''
className={
'object-cover object-center max-w-[150%] transition delay-500 duration-1000' +
(img0 ? ' opacity-100' : ' opacity-0')
}
/>
</div>

.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
.perspective {
-webkit-perspective: 1800px;
perspective: 1800px;
}
.card {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}

Answer 2

在另一个div和p标签的前后div内换行文本。然后在css中，为div添加

{position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;}

， p用

position: relative;
transform: translate3d(0, 0, 2px) perspective(2px);