Safari浏览器不支持伪元素上的转换

Question

我的css在这里

#hamburger {
  box-sizing: border-box;
  display: none;
  width: 60px;
  height: 50px;
  left: 0;
  margin: 0;
  z-index: 2;
}
#hamburger:before, #hamburger:after, #hamburger span {
  background: #fff;
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  position: absolute;
  left: 15px;
}
#hamburger:before {
  top: 13px;
}
#hamburger span {
  top: 23px;
}
#hamburger:after {
  top: 33px;
}
#hamburger:before, #hamburger:after, #hamburger span {
  -webkit-transition: none 0.5s ease 0.5s;
  transition: none 0.5s ease 0.5s;
  -webkit-transition-property: transform, top, bottom, left, opacity;
  transition-property: transform, top, bottom, left, opacity;
}
/* Hamburger animation */
html.mm-opening #hamburger:before, html.mm-opening #hamburger:after {
  top: 23px;
}
html.mm-opening #hamburger span {
  opacity: 0;
}
html.mm-opening #hamburger:before {
  transform: rotate(45deg);
}
html.mm-opening #hamburger:after {
  transform: rotate(-45deg);
}

<a id="hamburger" class="mm-fixed mm-slideout" href="#menu"><span></span></a>

以下是一个工作示例的链接http://mmenu.frebsite.nl/点击汉堡图标进行测试-在除safari 之外的所有浏览器中都可以使用

我如何使它在Safari上工作？

Answer 1

 -webkit-transform: rotate(-45deg) 

解决了这个问题。Via@DomlThe Bread