CSS3 转换：翻译(-100%);在IE11和Edge中无法正常工作

Question

容器transform: translatex(-100%);移动到 Internet Explorer 11 中的 transform: translatex(0);，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