使用CSS旋转Mapbox的HTML标记不起作用？

Question

我正在尝试将地图图钉设置为-45度，因此它们看起来像在html图钉中一样笔直。我创建的地图框显示该图钉显示为不同的天使，并且我无法旋转地图图钉，我该如何将图钉旋转到精确的-45使用mapbox api设置度角？

<style>
.marker {
  transform:rotate(-45deg);
  border-radius: 50% 50% 50% 0%;
  padding: 5px 3px 3px 0;
  width: 30px;
  height: 30px;
  background: #ed1f34;
  margin: -2.2em 0 0 -1.3em;
  -webkit-box-shadow: -1px 1px 4px rgba(0, 0, 0, .5);
  -moz-box-shadow: -1px 1px 4px rgba(0, 0, 0, .5);
  box-shadow: -1px 1px 4px rgba(0, 0, 0, .5);
  text-align:center;
  box-sizing:border-box;
  color:#fff;
  position: absolute;
  right: 40px;
  top: 72px;
  transform-origin: bottom center;
}
</style>