jquery - -o-backface-visibility Opera で動作しませんか?

Question

だから私はホバーでこのCSS 3D変換を使用しています...

動作: Webkit、FF 動作しない: Opera 未テスト: IE

ここの Chris の記事からわかることから、Opera は -o-backface-visibility をサポートしています (下部のブラウザー サポートの表を参照)。ただし、彼の例でも、このプロパティは Opera に固執していないようです。ただし、彼は Opera のホバー時にフォールバックを管理しているように見えるので、そこまで到達できれば満足ですが、まだそこにはいません。

http://css-tricks.com/almanac/properties/b/backface-visibility/

フィドル: http://jsfiddle.net/uxable/YHeKX/

(なんだ...私のフィドルコードに貼り付ける簡単な方法はない?あるに違いない...)

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

と

   .flip {
   position: relative;
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   -o-perspective: 1000;
   margin: 0 0 20px 0;
}
.card {
   width: 200px; 
   height: 50px;
   position: relative;
   -webkit-transform-style: preserve-3d;
   -webkit-transition: 0.5s;
   -moz-transform-style: preserve-3d;
   -moz-transition: 0.5s;
   -ms-transform-style: preserve-3d;
   -ms-transition: 0.5s;
   -o-transform-style: preserve-3d;
   -o-transition: 0.5s;
}
.flip:hover .card {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);                
}
.face {
   position: absolute;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   color: white;
   line-height: 50px;
   text-align: center;
}
.no-hide .face {
   -webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
   -ms-backface-visibility: visible;
   -o-backface-visibility: visible;
}
.front {
   background: red;
   z-index: 10;
}
.back {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   background: green; 
}
.flip:hover .front {
   z-index: 0;
}