css3 변환 : translatex (-100 %); IE11 및 Edge에서 제대로 작동하지 않습니다.

Question

컨테이너 transform: translatex(-100%);이 Internet Explorer 11 및 Edge에서 transform: translatex(0);으로 이동하면 제대로 작동하지 않습니다. 내용은 움직이지만 마우스를 터치하면 되돌아갑니다.

.widget { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    background-color: #fff; 
    border-radius: 4px; 
    transition: all 1.5s; 
    max-height: 400px; 
    left: 0; 
    transform: translatex(-100%); 
} 
.widget:hover { 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
    transform: translatex(0); 
} 

데모 : https://codepen.io/anon/pen/MEMKKL

Answer 1

앞서 언급 한 바와 같이, 당신은 브라우저 지원 -ms-의 접두사를 추가해야합니다.

참고로, 당신은 사용할 수 있습니다 : https://caniuse.com/#search=transform