Question

基于this excellent blogpost我在我正在处理的网络应用程序的页面上实现了一个翻转动画。起初我使用了博客帖子顶部提供的CSS类，但不幸的是，这在IE10中不起作用所以我开始使用CSS类作为解决方案，以便在IE10结束时提供它。博客文章。

我为这篇文章极大地简化了这个例子，但我的代码看起来像这样

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="flipper.css" rel="stylesheet">
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="flip-container" id="flipFrame">
    <div class="flipper">
        <div class="front">
            FRONT CONTENT
            <br>
            <button onclick="flipFrame()">
                Start <b>here</b>
            </button>
        </div>
        <div class="back">
            BACK CONTENT
        </div>
    </div>
</div>
</body>
 <script>
function flipFrame(){
    document.querySelector("#flipFrame").classList.toggle("hover")
}
</script>

CSS：

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
.flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);    
}
.flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);       
}

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);    
}

/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);  
}

此代码在Chrome和Edge中完美运行。在IE10上它可以工作，但没有翻转动画。它只是在没有翻转的情况下使用后部div切换前部div，但仍然可以。但是，在Safari（Mac OS X和iPhone）上，它无法正常工作。两个div都经常彼此相邻（后面的div被镜像）

有谁知道如何在IE10以及Mac OS X和iPhone上的Safari中使用此功能？

可以在此处找到并执行代码段：https://jsfiddle.net/jrwx3L2e/1/

Answer 1

根据Can I use，您需要为super.v setDequeueReusableCellCommon添加backface-visibility前缀，即使是在撰写本文时最新版本为9.1。

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

<强> Updated Example

＆＃13;

document.getElementById("myBtn").addEventListener("click", function() {
  document.querySelector("#flipFrame").classList.toggle("hover")
});

＆＃13;

/* entire container, keeps perspective */

.flip-container {
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/*  UPDATED! flip the pane when hovered */

.flip-container.hover .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flip-container.hover .front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}

/* flip speed goes here */

.flipper {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */

.front,
.back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}

/*  UPDATED! front pane, placed above back */

.front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* back, initially hidden pane */

.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

＆＃13;

<div class="flip-container" id="flipFrame">
  <div class="flipper">
    <div class="front">
      FRONT CONTENT
      <br>
      <button id="myBtn" onclick="flipFrame()">
        Start <b>here</b>
      </button>
    </div>
    <div class="back">
      BACK CONTENT
    </div>
  </div>
</div>

＆＃13;

CSS翻转动画在Safari中不起作用

1 个答案: