Повернуть текст марок подсказки листовок ⇐ CSS

[Anonymous]

У меня есть несколько JSON с данными, которые должны быть показаны на карте. < /p>

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['coordinates'], {
opacity: 0.01
}).bindTooltip(shapess['text'],
{
permanent: true,
className: "shapesText",
offset: [0, 0],
direction: "center"
}
).openTooltip().addTo(mymap);

markers[shapess['shapeId']] = marker;
}
< /code>

Я пытался повернуть текст с помощью CSS, но есть некоторая проблема. < /p>

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

Я выясняю, почему эта проблема происходит. < /p>

Сгенерированный HTML -код имеет transform: translate3d() и когда я использую transform: rotate () ` он переопределяет повторение элемента. Как я могу использовать оба значения свойства вместе? Другими словами, как я могу добавить вращение без переоценки transtate3d < /p>

Есть ли какой -нибудь листочный способ установить различное вращение для каждого маркера, если это необходимо? < /p>

Я просто использую листовку, чтобы показать пользовательскую негеографическую карту, и необходимо показывать иногда текст, который будет следовать некоторым границам форм.bla bla


Подробнее здесь: https://stackoverflow.com/questions/479 ... oltip-text