CSS 3D變換屬性

Question

我正在使用CSS3變換屬性創建「翻轉」效果。

我在Chrome，Firefox和Safari的最新版本中運行良好，但恐怕我很難爲IE9和Opera構建某種回退功能，因爲它們只支持2d轉換。

我創建了一個小提琴來展示我目前正在使用的代碼。

請找到鏈接到這個位置：http://jsfiddle.net/montyhog/SaYUe/9/

我並不試圖重新在這些瀏覽器的效果只需要創建一個回退在當IMG1懸停在IMG2等變淡之上。

下面是HTML：

<div class="h1older"> 
<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
<div class="flipper"> 
<div class="front"><img src="http://www.hogshouse.com/fbtest/img/cdartwork/meds.png" /></div> 
<div class="back"><img src="http://www.hogshouse.com/fbtest/img/cdartwork/back.png" /></div> 
</div> 
</div> 
</div> 

而CSS：

.h1older { 
    width: 400px; 
    height: 400px; 
    border: 1px #ff00d5 dashed; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

.flip-container { 
    perspective: 1000; 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
} 

.flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
} 

.flip-container:OnClickListener .flipper, .flip-container.OnClickListener .flipper { 
     transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
} 

.flip-container:focus .flipper, .flip-container.focus .flipper { 
     transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
} 


.flip-container, .front, .back { 
    width: 100%; 
    height: 100%; 
} 

.flipper { 
    transition: 0.6s; 
    -webkit-transition: 0.6s; 
    -moz-transition: 0.6s; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    position: relative; 
} 

.front, .back { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.front { 
    z-index: 2; 
    background-color: #139eef; 
} 

.back { 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    background-color: #ff0000; 
} 

.front img { 
    width: 100%; 
} 

.back img { 
    width: 100%; 
} 

Answer 1

-o-tramsform: 

和

-ms-transform: 

轉變應該IE和Opera工作。爲每個轉換製作另外2個alt行。