Google chrome -webkit转换：rotateY在Mac OS上失败（在Chrome中）

我使用CSS3创建了一个3D卡片翻转效果。这种效果非常类似于 不幸的是，当使用Mac OS的用户访问此页面时，他们似乎只看到背面，并且页面旋转方向错误

这是我正在使用的CSS

#f1_container {
    perspective: 1000;
    -webkit-perspective: 1000;    
}

#f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.0s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1.0s ease-in-out;
    padding-bottom: 10px;
}

#f1_container.hover #f1_card {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.f1_face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: rgb(247, 247, 247);
    box-shadow: 0px 5px 15px 5px black;
    z-index: 10;
}

.f1_face.f1_back {
    display: block;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    box-sizing: border-box;
    padding-top: 10px;    
    color: rgb(255, 255, 255);
    text-align: center;
    background-color: rgb(247, 247, 247);
}

例如，请参阅我上面链接的页面

  Please try this. Hope this is what was needed

---

我建议您查看中的对象。 它是用于跨平台、动态更改动画和web界面的前端框架（与苹果产品相适应）

let anim=UIViewPropertyAnimator（持续时间：0.50，曲线：.easeIn）；
让角=
anim.addAnimations{self.view.transform=CGAffineTranform（旋转角度：（angle*Math.PI/180）}
{anim.startAnimation（）；}
--然后只需为on:not（：hover）eventhandler执行另一个操作。
我已经做了一些修改，添加了更新的CSS，它在Chrome中显示了相同的方式。如果你只想为Chrome和Safari使用它，请使用<代码> -WebKET-<代码>浏览器。如果你的文本在中间，那么你可以制作<代码>对齐项目：Center < /Cord>请检查下面的图像和代码。< /P>


#f1#U卡{
宽度：100%；
身高：100%；
变换样式：保留-3d；
转换：转换1.0s易入易出；
-webkit变换样式：保留-3d；
-webkit转换：-webkit转换1.0s易入易出；
垫底：10px；
}
#f1_容器。悬停#f1_卡{
变换：旋转（180度）；
-webkit变换：旋转（180度）；
}
.f1_面{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
-webkit背面可见性：隐藏；
背景色：rgb（247247247）；
盒影：0px 5px 15px 5px黑色；
z指数：10；
}
.f1_面.f1_背{
显示器：flex；
变换：旋转（180度）；
-webkit变换：旋转（180度）；
框大小：边框框；
填充顶部：10px；
颜色：rgb（255、255、255）；
文本对齐：居中；
背景色：rgb（247247247）；
证明内容：柔性端；
对齐项目：柔性端；
}
.f1_面.f1_背p{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
这似乎是一个Chrome（WebKit？）bug，与这个问题相关：是的-看起来确实是这样。有人知道解决方法吗？@Aditi，你有密码笔吗？我在Mac上，它对我来说很好link@TarunLalwani这里是@Aditi，请检查下面的答案！尽量避免只使用链接的答案。答案应始终是描述性的，并且不应离开StackOverflow，使用链接作为备份答案的源。对于codepens等，建议将代码添加到代码标记中的答案或作为代码段。链接可能会过期，将来可能会被删除，因此此答案在将来可能是多余的。
let anim = UIViewPropertyAnimator(duration: 0.50, curve: .easeIn);
let angle = <whateverangle you want>

anim.addAnimations { self.view.transform = CGAffineTranform(rotationAngel: (angle * Math.PI / 180) }

<EventHandler for onHover>{ anim.startAnimation(); }
-- Then just do another one for on:not(:hover) eventhandler.