Rotate Leaflet markers tooltip text

I have some JSON with data that should be shown on the map.

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 < 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;
}

I tried to rotate text with CSS but there is some issue.

     .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
    }

I figure out why this issue happens.

generated HTML code has transform: translate3d() and when I use transform: rotate()` it override element reposition. How can I use both property values together? In other words, how can I add rotation without overriding translate3d

Is there is some Leaflet's way to set different rotation to each marker if it is needed?

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.

This is generated HTML code

<div class="leaflet-tooltip shapesText leaflet-zoom-animated leaflet-tooltip-center" style="opacity: 0.9; transform: translate3d(385px, -32px, 0px);">bla bla</div>

I needed to play a game with current tooltip content.

var shapess = JSON.parse(shapesCoordinates);

var markers = [];
for (var i = 0; i < shapess.length; i++) {
    var marker = L.marker(shapess[i]['coordinates'], {
        opacity: 0.01
    }).bindTooltip(shapess[i]['text'],
        {
            permanent: true,
            className: "shapesText" + i,
            offset: [0, 0],
            direction: "center"
        }
    ).openTooltip().addTo(mymap);

I needed to access marker tooltip and change its HTML code in order to replace older transform property with current translate3d value and add dummy rotate value. Dummy in reason that added rotation does not work.

    if (shapess[i]["rotation"]) {
        var content = marker['_tooltip']['_container'];
        var style = $(content).attr('style');
        var transformProperty = style.substring(style.indexOf('transform'));
        var transformRotationProperty = transformProperty.replace(';', ' rotation(' + shapess[i]["rotation"] + 'deg);');
        var changedContent = content.outerHTML.replace(transformProperty, transformRotationProperty);

        marker['_tooltip'].setContent(changedContent);
        $('.shapesText' + i).css({'transform': 'rotate(' + shapess[i]["rotation"] + 'deg)'});
    }
    markers[shapess[i]['shapeId']] = marker;

}

After new content is added to tooltip I can access tooltip class and change transform property by adding only rotate value. It will keep old translate value without overriding.

I am not sure if it is a bug or what can be a problem, but if I add only rotate without translate3d old value will be overridden.

But, if old transform has both translate3d and rotate using CSS transform with only rotate will not override old translate3d