代码之家 › 专栏 › 技术社区 › Cymro

Safari中的CSS动画卡(3d转换)

transform safari css3 css

0

Cymro · 技术社区 · 7 年前

一个简单的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)");}

任何帮助都将不胜感激。

1 回复 | 直到 7 年前

1

E.Omar 7 年前

请试试这个

$('#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);
}

2

0

Cymro 7 年前

对其他人来说,这是我经过几天的反复试验后找到的解决方案。我的问题没有提供错误的真正原因。我在父容器中有一个背景图像:

.flip-card-inner {background:url('image.png') no-repeat top}

这导致卡片背面的文字在iPad上翻动Safari后闪烁消失。

我将背景图像从父容器移动到前元素和后元素。

.flip-card-front, .flip-card-back {background:url('image.png') no-repeat top}

然后,它在iPad上的Safari中没有问题。