css - Safari 中的 CSS FlipCard(3d 转换)
问题描述
一个简单的 FlipCard 应用程序。该应用程序在 Chrome 中运行良好,但在 Safari 中无法运行。在 Safari 中,单击时会看到卡片背面的文字,然后闪烁,然后消失。
代码的想法来自这个链接:w3schools/howto/css-flip-card
HTML:
<div class='flip-card'>
<div class='flip-card-inner'>
<div class='flip-card-front'><p>1</p></div>
<div class='flip-card-back'><p>2</p></div>
</div>
</div>
CSS:
.flip-card {
perspective:1000px;
-webkit-perspective:1000px}
.flip-card-inner {
position:relative;
transition:transform 0.8s;
-webkit-transition:-webkit-transform 0.8s;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d}
.flip-card-front, .flip-card-back {
position:absolute;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;}
.flip-card-back {
transform:rotateY(180deg);
-webkit-transform: rotateY(180deg);}
JS:
$('#flash-card-game').on('click',function(){FlipToBack()});
function FlipToBack(){
$('#flash-card-game').css("transform","rotateY(180deg)");
$('#flash-card-game').css("-webkit-transform","rotateY(180deg)");
setTimeout(FlipToFront,1000);}
function FlipToFront(){
$('#flash-card-game').css("transform","rotateY(0deg)");
$('#flash-card-game').css("-webkit-transform","rotateY(0deg)");}
任何帮助,将不胜感激。
解决方案
请试试这个
$('#flash-card-game').on('click', function() {
FlipToBack()
});
function FlipToFront() {
$('#flash-card-game').removeClass("flip-to-back");
$('#flash-card-game').addClass("flip-to-front");
}
function FlipToBack() {
$('#flash-card-game').addClass("flip-to-back");
setTimeout(FlipToFront, 1000);
}
Write the folowing CSS
.flip-to-front {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-to-back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
推荐阅读
- jquery - jquery animate() 干扰 css 转换导致错误动画
- c# - 如果有任何错误,如何执行双重“if”语句跳转到相同的“else”
- javascript - Pixi.js 视口跟随对象
- prometheus - 找出 prometheus 中的高 CPU 使用率查询
- ios - iOS swift - 处理来自 API 的响应
- amazon-s3 - Rundeck S3 插件
- php - Twig 中的 PHP for 循环
- typescript - 打字稿如何重写接口的属性类型
- java - 如何直接在 JDL 中加密 JHIPSTER 应用程序的数据?
- c# - 如何统一更新gps?