IE에서 카드 플립 트랜지션이 제대로 작동하지 않습니다.

Question

AngularJS에 JSFiddle 카드 반전의 예를 만들었습니다.

Chrome에서 완벽하게 작동합니다. Firefox에서는 정상적으로 작동합니다. IE에서는 작동하지만 제대로 작동하지 않습니다.

원근법 CSS 규칙을 제거하는 즉시 원근법없이 완벽하게 작동합니다. -webkit- 및 -ie- 규칙을 추가해도 여전히 작동하지 않습니다. 이 IE는 버그입니다.

전이를 만들기 위해 ng-enter와 ng-leave를 사용했습니다. JSFiddle에서 전체 코드를 확인하십시오.

.serviceRoll{ 
    margin:32px; 
    position: relative; 
    height:150px; 
    width:215px; 
    perspective:800px; 
} 
.rollInner { 
    background-color:lightgrey; 
    padding-top:50px; 
    height:100px; 
    width:215px; 
    text-align:center; 
    font-size:2em; 
    border-radius: 16px; 
} 
.roll { 
    position: absolute; 
} 
.roll.ng-enter { 
    -webkit-transition:0.25s ease all; 
    transition:0.25s ease all; 
    -webkit-transform: rotateX(-90deg); 
    transform: rotateX(-90deg); 
    z-index: 1; 
} 
.roll.ng-enter.ng-enter-active { 
    -webkit-transform: rotateX(0deg); 
    transform: rotateX(0deg); 
    -webkit-transition-delay: 0.25s; 
    transition-delay: 0.25s; 
} 
.roll.ng-leave { 
    -webkit-transition:0.25s ease all; 
    transition:0.25s ease all; 
    -webkit-transform: rotateX(0deg); 
    transform: rotateX(0deg); 
    z-index: -1; 
} 
.roll.ng-leave.ng-leave-active { 
    -webkit-transform: rotateX(90deg); 
    transform: rotateX(90deg); 
} 

Answer 1

-webkit-가있는 곳에서도 -ms-에 대한 CSS 규칙을 추가하십시오. 웹킷 브라우저에서는 이러한 규칙을 추가했지만 웹킷이 아닌 브라우저에서는 추가하지 않았습니다. 몇 가지 CSS 규칙을 예로 들어 보겠습니다. 이 같은 것 -

.roll.ng-enter { 
    -webkit-transition:0.25s ease all; 
    -ms-transition:0.25s ease all; 
    transition:0.25s ease all; 
    -ms-transform: rotateX(-90deg); 
    -webkit-transform: rotateX(-90deg); 
    transform: rotateX(-90deg); 
    z-index: 1; 
} 
.roll.ng-enter.ng-enter-active { 
    -webkit-transform: rotateX(0deg); 
    -ms-transform: rotateX(0deg); 
    transform: rotateX(0deg); 
    -webkit-transition-delay: 0.25s; 
    -ms-transition-delay: 0.25s; 
    transition-delay: 0.25s; 
} 
.roll.ng-leave { 
    -webkit-transition:0.25s ease all; 
    -ms-transition:0.25s ease all; 
    transition:0.25s ease all; 
    -webkit-transform: rotateX(0deg); 
    -ms-transform: rotateX(0deg); 
    transform: rotateX(0deg); 
    z-index: -1; 
} 

당신은 아이디어를 얻습니다. 희망이 있습니다!