title: Rotate Leaflet markers tooltip text
body: <p>I have some JSON with data that should be shown on the map.</p>
  
  <pre><code>var shapesCoordinates = '[{"shapeId": 1,"coordinates": [-1500,500],"text": "bla bla", "rotation": 20},{"shapeId": 2,"coordinates": [-1800,800],"text": "idemooooo", "rotation": 60}]';
  var shapess = JSON.parse(shapesCoordinates);
  
  var markers = [];
  for (var i = 0; i &lt; shapess.length; i++) {
      var marker = L.marker(shapess[i]['coordinates'], {
          opacity: 0.01
      }).bindTooltip(shapess[i]['text'],
          {
              permanent: true,
              className: "shapesText",
              offset: [0, 0],
              direction: "center"
          }
      ).openTooltip().addTo(mymap);
  
      markers[shapess[i]['shapeId']] = marker;
  }
  </code></pre>
  
  <p>I tried to rotate text with CSS but there is some issue.</p>
  
  <pre><code>     .leaflet-tooltip {
              box-shadow: none;
              /** 
                This rotates text but break marker position
                 set all markers on same (default) position
              */
              transform: rotate(45deg) !important;
          }
  
      .shapesText {
          position: absolute;
          /**
            This has no impact on text
          */
          transform: rotate(45deg) !important;
          font-size:14px;
          background: none;
          border: none
      }
  </code></pre>
  
  <p>I figure out why this issue happens.</p>
  
  <p>generated HTML code has <strong><code>transform: translate3d()</code></strong> and when I use <strong>transform: rotate()`</strong> it override element reposition. How can I use both property values together? In other words, how can I add rotation without overriding translate3d</p>
  
  <p>Is there is some Leaflet's way to set different rotation to each marker if it is needed?  </p>
  
  <p>I am just using Leaflet to show a custom non-geographic map and there is needs to show sometimes text which will follow some shapes borders.</p>
  
  <p>This is generated HTML code</p>
  
  <pre><code>&lt;div class="leaflet-tooltip shapesText leaflet-zoom-animated leaflet-tooltip-center" style="opacity: 0.9; transform: translate3d(385px, -32px, 0px);"&gt;bla bla&lt;/div&gt;
  </code></pre>