Javascript 非 webkit 浏览器的翻转卡片效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6268428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flip card effect for non-webkit browsers
提问by dandoen
So I have been looking for the flip card effect. There are a number of nice examples that work well with webkit browsers. For example:
所以一直在寻找翻卡效果。有许多很好的例子可以很好地与 webkit 浏览器配合使用。例如：
http://www.ilovecolors.com.ar/wp-content/uploads/css-card-flip-webkit/click.html
http://www.ilovecolors.com.ar/wp-content/uploads/css-card-flip-webkit/click.html
But I have found none that works with Internet Explorer/Firefox as well. Do you guys perhaps have an example where a similar flip effect is done?
但我发现没有一个也适用于 Internet Explorer/Firefox。你们可能有一个完成类似翻转效果的例子吗？
回答by Sparky
This seems to fit the bill...
这似乎符合要求......
Quote:Flip is compatible with: Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8)
引用：Flip 兼容：Firefox、Chrome/Chromium、Opera、Safari 甚至 IE (6,7,8)
Here is another one...
这是另一个...
http://dev.jonraasch.com/quickflip/examples/
http://dev.jonraasch.com/quickflip/examples/
http://jonraasch.com/blog/quickflip-2-jquery-plugin
http://jonraasch.com/blog/quickflip-2-jquery-plugin
There is no "flip" in this one, but perhaps you'll find this helpful in another way...
这个没有“翻转”，但也许你会发现它以另一种方式有帮助......
http://malsup.com/jquery/cycle/browser.html
http://malsup.com/jquery/cycle/browser.html
This one seems powerful, but you'll have to program the flip yourself...
这个看起来很强大，但你必须自己编程翻转......
回答by Adam Fraser
There are -moz prefixes that should let you accomplish what you're trying to do.
有 -moz 前缀可以让你完成你想要做的事情。
See here: http://css3playground.com/flip-card.php
见这里：http: //css3playground.com/flip-card.php
Try adding -moz variants of all the -webkit magic here: http://jsfiddle.net/nicooprat/GDdtS/
尝试在此处添加所有 -webkit 魔法的 -moz 变体：http: //jsfiddle.net/nicooprat/GDdtS/
Or... if you're using Compass (http://compass-style.org) and Sass (sass-lang.com) like me, this works nicely in Chrome, Safari, and FF.
或者...如果你像我一样使用 Compass ( http://compass-style.org) 和 Sass (sass-lang.com)，这在 Chrome、Safari 和 FF 中运行良好。
HTML
HTML
<div class="flip">
<div class="card">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>
?
?
SASS with compass mixins
带有指南针混合的 SASS
(http://compass-style.org/reference/compass/css3/transform/)
( http://compass-style.org/reference/compass/css3/transform/)
.flip
position: relative
+perspective(800)
width: 80%
height: 200px
.flip .card.flipped
+transform(rotatex(-180deg))
.flip .card
+transform-style(preserve-3d)
+transition(0.5s)
width: 100%
height: 100%
.flip .card .face
position: absolute
z-index: 2
+backface-visibility(hidden)
width: 100%
height: 100%
.flip .card .front
position: absolute
z-index: 1
.flip .card .back
+transform(rotatex(-180deg))
// Make it at least functional IE
.flip .card.flipped .back
z-index: 0
回答by Barlow Tucker
Check out this blog post from David Walsh: http://davidwalsh.name/css-flip
查看 David Walsh 的这篇博文：http: //davidwalsh.name/css-flip
It has some great code for creating a flip effect that works on multiple browsers.
它有一些很棒的代码，可以创建适用于多个浏览器的翻转效果。
回答by Tinclon
I also couldn't seem to find a good example of this anywhere, so I spent someway too much time making my own.
我似乎也无法在任何地方找到一个很好的例子，所以我花了太多时间来制作自己的。
This one works on all browsers, does not have that weird 360deg IE flip, and includes provision for static content (that lives on both sides of the card - which I needed to put a 'flip' button at the top right of both sides).
这个适用于所有浏览器，没有那种奇怪的 360 度 IE 翻转，并且包括静态内容的规定（位于卡的两侧 - 我需要在两侧的右上角放置一个“翻转”按钮） .
--I tested on latest versions of Chrome, Firefox, Safari, Opera, and IE.
--我在最新版本的 Chrome、Firefox、Safari、Opera 和 IE 上进行了测试。
http://jsfiddle.net/Tinclon/2ega7yLt/7/
http://jsfiddle.net/Tinclon/2ega7yLt/7/
Edit: Also works with transparent backgrounds: http://jsfiddle.net/Tinclon/2ega7yLt/8/
编辑：也适用于透明背景：http: //jsfiddle.net/Tinclon/2ega7yLt/8/
The css (of course) includes IE hacks, so it's a bit long, but the html is quite straightforward:
css（当然）包括 IE hacks，所以它有点长，但是 html 非常简单：
<div class="card">
<div class="content">
<div class="cardFront">FRONT CONTENT</div>
<div class="cardBack">BACK CONTENT</div>
<div class="cardStatic">STATIC CONTENT</div>
</div>
</div>
$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));
.card {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
margin:80px 150px;
width:320px;
height:243px;
vertical-align:top;
position:absolute;
display:block;
font-size:25px;
font-weight:bold;
}
.card .content {
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/* content backface is visible so that static content still appears */
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
border: 1px solid grey;
border-radius: 15px;
position:relative;
width: 100%;
height: 100%;
}
.card.applyflip .content {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.card .content .cardStatic {
/* Half way through the card flip, rotate static content to 0 degrees */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
text-align: center;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
line-height:100px;
}
.card.applyflip .content .cardStatic {
/* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront {
background-color: skyblue;
color: tomato;
}
.card .content .cardBack {
background-color: tomato;
color: skyblue;
}
.card .content .cardFront, .card .content .cardBack {
/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: visible;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
line-height:200px;
border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.card .content .cardBack, .card.applyflip .content .cardBack {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront, .card.applyflip .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }
回答by jeswang
I was trying to use this http://blog.guilhemmarty.com/flippy/, you can have a try.
我正在尝试使用此http://blog.guilhemmarty.com/flippy/，您可以尝试一下。
