LeafletJS marker direction test

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://rawgit.com/openplans/Leaflet.AnimatedMarker/master/src/AnimatedMarker.js"></script>
<div id="map"></div>

CSS

#map {
  height: 100vh;
  width: 100wh;
}

.my-div-icon > div {
  position: relative;
  width: 64px;
  height: 64px;
}

.my-div-image {
  width: 64px;
  height: 64px;
  display: block;
  transform: rotate(180deg);
  transform-origin: 32px 24px;
}

.my-div-span {
  position: absolute;
  top: 16px;
  display: block;
  width: 100%;
  text-align: center;
}

JavaScript

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

var map = L.map('map').setView([58.9700, 5.7331], 18).addLayer(osm);

var myIcon = L.icon({
  iconUrl: 'http://www.iconsdb.com/icons/preview/soylent-red/map-marker-2-xxl.png',
  iconSize: [64, 64],
  iconAnchor: [32, 32],
  //popupAnchor: [-3, -76],
  //shadowSize: [68, 95],
  //shadowAnchor: [22, 94]
});

var myIcon2 = new L.DivIcon({
  className: 'my-div-icon',
  html: '<div><img class="my-div-image" src="http://www.iconsdb.com/icons/preview/soylent-red/map-marker-2-xxl.png"/>' +
    '<span class="my-div-span">X90</span></div>',
  iconAnchor: [32, 30],
});

var marker = L.marker([58.9700, 5.7331], {
    icon: myIcon2,
    rotationAngle: 72,
    rotationOrigin: 'center center',
    title: 'X90'
  })
  //.bindTooltip('X90')
  .addTo(map);

var marker2 = L.marker([58.9700, 5.7331], {
  })
  .addTo(map);