CSS 翻轉動畫在 Safari 中不起作用
[英]CSS flip-animation not working in Safari
問題描述
基於這篇優秀的博文，我在我正在處理的 Web 應用程序的頁面上實現了一個翻轉動畫。 起初，我使用了博客文章頂部所示的 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/
2 個解決方案
解決方案1
7 已采納 2016-01-17 02:36:46
根據我可以使用 ，您需要為Safari的backface-visibility添加前綴，即使是在撰寫本文時最新版本為9.1。
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
document.getElementById("myBtn").addEventListener("click", function() { document.querySelector("#flipFrame").classList.toggle("hover") });
/* 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); }
<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>
解決方案2
0 2021-11-23 08:41:50
將文本包裹在另一個 div 和 ap 標簽中。 所以它看起來像下面
<div class="front">
<div> <p>FRONT CONTENT <br> <button onclick="flipFrame()">Start <b>here</b></button></p>
</div> </div><div class="back">
<div><p>BACK CONTENT</p></div>
</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(100px);
翻轉動畫在Safari中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.