CSS翻转动画无法在Safari中使用 [英] CSS flip-animation not working in Safari
问题描述
基于这篇出色的博文，我在Web应用程序的页面上实现了翻转动画正在努力. 最初，我使用博客文章顶部介绍的CSS类，但是不幸的是，这在IE10中不起作用，因此我开始使用被提议作为解决方案的CSS类，以使其在IE10末尾出现.博客文章.
Based on this excellent blogpost I implemented a flip-animation on a page of a web-application I am working on. At first I used the CSS-classes as presented in the top of the blogpost but unfortunately this doesn't work in IE10 so I started using the CSS-class that was proposed as a solution to get it working in IE10 presented at the end of the blogpost.
我为这篇文章极大地简化了示例，但是我的代码看起来像这样
I simplified the example tremendously for this post but my code looks like this
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已镜像)
This code works perfectly in Chrome and in Edge. On IE10 it works but there is no flip-animation. It just switches the front-div with the back-div without flipping but that's still OK. In Safari (on Mac OS X and iPhone), however, it is not working correctly. Both of the divs are constantly visible next to each other (with the back-div being mirrored)
有人知道我如何才能在IE10以及Mac OS X和iPhone的Safari中使用此功能吗?
Does anyone know how I can get this functionality to work in IE10 as well as in Safari on Mac OS X and iPhone?
可以在此处找到并执行以下代码段: https://jsfiddle.net/jrwx3L2e/1/
The code snippet can be found and executed here: https://jsfiddle.net/jrwx3L2e/1/
推荐答案
Updated Example
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>
这篇关于CSS翻转动画无法在Safari中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
