非webkit浏览器的翻牌效果答案

【问题标题】：Flip card effect for non-webkit browsers非webkit浏览器的翻牌效果
【发布时间】：2015-01-18 05:22:08
【问题描述】：

所以我一直在寻找翻牌效果。有许多很好的例子可以很好地与 webkit 浏览器配合使用。例如：

http://www.ilovecolors.com.ar/wp-content/uploads/css-card-flip-webkit/click.html

但我发现没有一个也适用于 Internet Explorer/Firefox。你们有没有做过类似翻转效果的例子？

【问题讨论】：

您可以通过水平缩小一个 div，然后再增长另一个以显示卡片的“背面”来伪造它。它可能看起来相当难看，但可以在任何 jquery 可用的地方工作。
谢谢您的回复。快速翻转 (dev.jonraasch.com/quickflip/examples) 做了类似你描述的事情。而且确实看起来不是很整洁。我正在开发的网站的目标是看起来花哨而不是功能，因此不幸的是，缩放不是一种选择..

标签： javascript jquery html css

【解决方案1】：

这似乎符合要求...

http://lab.smashup.it/flip/

引用： Flip 兼容：Firefox、Chrome/Chromium、Opera、Safari 甚至 IE (6,7,8)

这是另一个...

http://dev.jonraasch.com/quickflip/examples/

http://jonraasch.com/blog/quickflip-2-jquery-plugin

这个没有“翻转”，但也许你会发现这在另一种方面很有帮助......

http://malsup.com/jquery/cycle/browser.html

这个看起来很强大，但你必须自己编程翻转......

https://github.com/heygrady/transform/wiki

【讨论】：

嘿，谢谢。翻转看起来还不错。当然，唯一的问题是只有在翻转 div 时才会加载内容。我的目标是在翻转过程中更多地看到实际内容。至于 Quickflip，我也发现了这些。我个人认为它们看起来不是很好。我希望得到与我发布的链接相同的“感觉”。无论如何感谢您的回复！
@dandoen：我明白了。如果您已经找到了一堆并针对该特定问题拒绝了它们，那么在您的问题中提及该关键要求会很有帮助。
真的，很抱歉。我很着急，找不到链接。
@dandoen：我在答案中添加了另一个链接。
你是最棒的。 heygrady 似乎是我正在寻找的东西，我马上去看看。谢谢。

【解决方案2】：

有 -moz 前缀可以让你完成你想要做的事情。

请看这里： http://css3playground.com/flip-card.php

尝试在此处添加所有 -webkit 魔法的 -moz 变体： http://jsfiddle.net/nicooprat/GDdtS/

或者...如果您像我一样使用 Compass (http://compass-style.org) 和 Sass (sass-lang.com)，这在 Chrome、Safari 和 FF 中运行良好。

HTML

<div class="flip"> 
    <div class="card"> 
        <div class="face front"> 
            Front
        </div> 
        <div class="face back"> 
            Back
        </div> 
    </div> 
</div>

带有指南针混合的 SASS

(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

【讨论】：

有些人拒绝了这个答案，因为 js-fiddle 在非 webkit 中不起作用。请实际阅读我的答案。我说过要在那个小提琴的 webkit 样式中添加 -moz 前缀。这篇文章的真正价值在于 SASS+compass 解决方案，它看起来更简洁，而且工作广泛。
在我看来，这应该是答案。
这仍然不适用于 IE。而 Sparky 的答案涵盖了许多不同的浏览器

【解决方案3】：

查看 David Walsh 的这篇博文：http://davidwalsh.name/css-flip

它有一些很棒的代码来创建适用于多个浏览器的翻转效果。

【讨论】：

【解决方案4】：

我似乎也无法在任何地方找到一个很好的例子，所以我花了一些太多时间自己制作。

这个适用于所有浏览器，没有那种奇怪的 360 度 IE 翻转，并且包括静态内容（位于卡片的两侧 - 我需要在右上角放置一个“翻转”按钮）两边）。

--我在最新版本的 Chrome、Firefox、Safari、Opera 和 IE 上进行了测试。

http://jsfiddle.net/Tinclon/2ega7yLt/7/

编辑：也适用于透明背景：http://jsfiddle.net/Tinclon/2ega7yLt/8/

css（当然）包括 IE hack，所以有点长，但 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% { } }

【讨论】：

这太棒了！在 IE 中工作得太完美了。现在，你能再帮我做一件事吗？在里面，cardFront 和 cardBack，我放了高度不固定的图像。为了响应能力，我也不能在卡片中给出固定的高度。由于在 cardFront 和 cardBack 中的绝对位置，卡片无法获得其孩子的高度。但是，我需要卡片的高度。因为，有很多张卡。由于没有得到高度，一张牌与另一张牌重叠。我已经用 jQuery 获得了高度，尽管它不能在像 iphone 这样的设备上正常工作。那么，您的代码有什么方法不使用绝对值吗？
这很好用！不过，我确实想知道这是否可以在手机上兼容？
我无法在本地完成这项工作。我应该将 [$('.card').hover(function(){$('.card').toggleClass('applyflip' );}.bind(this));] 在 html 文档中？我是否需要链接到 jquery 才能翻转？
它适用于大多数最新的浏览器。但是 IE9 不行。

【解决方案5】：

我正在尝试使用这个http://blog.guilhemmarty.com/flippy/，你可以试试。

【讨论】：