html - css3 变换 : translatex(-100%); not working properly in IE11 & Edge

Question

容器 transform: transformex(-100%); 移动到 transform: translatex(0); 在 Internet Explorer 11 和 Edge 中无法正常工作。内容会移动，但在触摸鼠标时会返回。

.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