非webkit浏览器的翻转卡效果

Question

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

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

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

Answer 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

Answer 2

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

见这里:http: //css3playground.com/flip-card.php

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

或者......如果你像我一样使用Compass(http://compass-style.org)和Sass(s​​ass-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与指南针mixins

(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