CSS로 플립 카드 만들기

Question

나는 CSS로 플립 카드 애니메이션을 만들려고합니다. 은 파이어 폭스, 크롬, 오페라, 사파리에서 잘 작동하지만 내가 (다시) 인터넷 익스플로러에 문제가 ... 내가 만든 데모에서

보라 : Text problem with Internet Explorer

파이어 폭스, 크롬, 오페라 (Opera)에서 확인 있다고 사파리!

하지만 내 텍스트는 Internet Explorer에서 반전됩니다. 제발, 내 코드에 무엇이 잘못 됐는지 말해 주시겠습니까?

CSS는 :

<style> 
    .flip-container { 
     -webkit-perspective : 680; 
     -ms-perspective: 680; 
     -moz-perspective: 680; 
     -o-perspective: 680; 
     perspective: 680;    
    } 

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

    .flip-container, .front .back { 
     width:480px; 
     height:340px; 
    } 

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

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

    .front { 
     z-index: 2; 
     -webkit-transform: rotateY(0deg); 
     -moz-transform: rotateY(0deg); 
     -ms-transform: rotateY(0deg); 
     -o-transform: rotateY(0deg); 
     transform: rotateY(0deg);  } 

    .back { 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     -ms-transform: rotateY(180deg); 
     -o-transform: rotateY(180deg); 
     transform: rotateY(180deg); 
    } 
</style> 

Answer 1

나는 최신 Internet Explorer 버전에 대한 업데이 트를 추가했다. 그것은 현대적인 데스크탑 브라우저마다 작동합니다.

초기 : 전면 = 0 ° 돌아 가기 = -180 °

호버 : 전면 = 180 ° 돌아 가기 = 0 °

나는 회전 값을 수정 이 코드는 여전히 과 호환되도록 업데이트해야합니다. IE6 IE7 IE8 :

<style> 
    .flip-container { 
     -webkit-perspective : 680; 
     -moz-perspective: 680; 
     -ms-perspective: 680; 
     -o-perspective: 680; 
     perspective: 680; 
    } 

    /* For Internet Explorer */   
    .flip-container:hover .back, .flip-container.hover .back {    
     -webkit-transform:rotateY(0deg); 
     -moz-transform:rotateY(0deg); 
     -ms-transform:rotateY(0deg); 
     -o-transform:rotateY(0deg); 
     transform: rotateY(0deg); 
    }   

    /* For Internet Explorer */   
    .flip-container:hover .front, .flip-container.hover .front {      
     -webkit-transform:rotateY(180deg); 
     -moz-transform:rotateY(180deg); 
     -ms-transform:rotateY(180deg); 
     -o-transform:rotateY(180deg); 
     transform: rotateY(180deg); 
    } 

    .flip-container, .front .back { 
     width:480px; 
     height:340px; 
    } 

    .flipper { 
     -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
     -ms-transform-style: preserve-3d; 
     -o-transform-style: preserve-3d; 
     transform-style: preserve-3d; 
     position: relative; 
    } 

    .front, .back {   
     -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
     -ms-transform-style: preserve-3d; 
     -o-transform-style: preserve-3d; 
     transform-style: preserve-3d; 
     -webkit-backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
     -ms-backface-visibility: hidden; 
     -o-backface-visibility: hidden; 
     backface-visibility: hidden;    
     -webkit-transition: 2.0s; 
     -moz-transition: 2.0s; 
     -ms-transition: 2.0s; 
     -o-transition: 2.0s; 
     transition: 2.0s; 

     position: absolute; 
     top: 0; 
     left: 0; 
    } 

    .front { 
     z-index:2;   
     -webkit-transform: rotateY(0deg); 
     -moz-transform: rotateY(0deg); 
     -ms-transform: rotateY(0deg); 
     -o-transform: rotateY(0deg); 
     transform: rotateY(0deg); 
    } 

    .back { 
     z-index:1; 
     -webkit-transform: rotateY(-180deg); 
     -moz-transform: rotateY(-180deg); 
     -ms-transform: rotateY(-180deg); 
     -o-transform: rotateY(-180deg); 
     transform: rotateY(-180deg);   
    } 

</style>