Seit Version 10 unterstützt in den dynamischen Ansichten auch der Firefox die 3d Bewegung der Flipcard-Kachel. Bis jetzt war da im Firefox ja nur ein Hintergrundwechsel zu sehen. Um die Funktion besser zu verstehen, habe ich so eine Flipcard-Kachel nachgebaut. Fahrt mit der Mause über das Bild und ihr seht die Drehbewegung.
Demo: Flipcard-Kachel
Markup
<div class="card"> <div class="front"> </div> <div class="back"> </div> </div>
CSS
.card { float: left; width: 400px; height: 260px; margin: 20px; position: relative; font-size: .8em; -webkit-perspective: 800px; -moz-perspective: 800px; } .card .front { float: none; position: absolute; top: 0; left: 0; z-index: 2; width: inherit; height: inherit; border: 1px solid #ccc; text-align: center; background: url(http://goo.gl/8MQMG); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; /* -- transition-- */ -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .card .back { float: none; position: absolute; top: 0; left: 0; z-index: 3; width: inherit; height: inherit; border: 1px solid #ccc; background: url(http://goo.gl/fTu2D); -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; /* -- transition-- */ -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .card:hover .front { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); } .card:hover .back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); }