JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://onadeyakaduwata.com/trek/css/app.css">
<div id="main" class="noise">

<div id="homeView" class="contentView" style=""><div class="panels animating" style="/* width: 800px; */ /* left: -1566px; */">

  

<div id="trekView" class="panelView" style="width: 100%; /* left: 1px; */ opacity: 1;"><div class="mapCenter" style="">
    <div class="mapOuter">
        <div class="mapPerspective">
            <div id="trekMapShadow" class="mapShadow" style="-webkit-transform: rotateX(70deg) rotateZ(1101.0299647219022deg);"></div>
            <div id="trekMap" class="mapInner" style="-webkit-transform: rotateX(70deg) rotateZ(1101.0299647219022deg);">
            
            
    
                <div class="mapImage" id="trekMapImage"></div>
                <div class="mapTrail" id="trekMapTrail"><div class="trekPath" style="left: 183px; top: 829px; width: 31px; height: 127px; background-position: -183px -829px;"></div><div class="trekPath" style="left: 137px; top: 758px; width: 66px; height: 71px; background-position: -137px -758px;"></div><div class="trekPath" style="left: 177px; top: 637px; width: 169px; height: 121px; background-position: -177px -637px;"></div><div class="trekPath" style="left: 346px; top: 583px; width: 82px; height: 64px; background-position: -346px -583px;"></div><div class="trekPath" style="left: 428px; top: 461px; width: 92px; height: 122px; background-position: -428px -461px;"></div><div class="trekPath" style="left: 460px; top: 255px; width: 76px; height: 206px; background-position: -460px -255px;"></div><div class="trekPath" style="left: 476px; top: 144px; width: 91px; height: 111px; background-position: -476px -144px;"></div><div class="trekPath" style="left: 547px; top: 113px; width: 76px; height: 36px; background-position: -547px -113px;"></div></div>
                
               
                
            </div>
        </div>
    </div>
   
   
   
    <div id="trekMapLabels" class="mapMarkerLabels">
  ...

JavaScript

//change left margin in label
 $(function () {
    var dragging = false,
        target_wp,
        o_x, o_y, h_x, h_y, last_angle;
    $('#trekMap').mousedown(function (e) {
        h_x = e.pageX;
        h_y = e.pageY; // clicked point
        e.preventDefault();
        e.stopPropagation();
        dragging = true;
        target_wp = $(e.target).closest('.mapPerspective');
        if (!target_wp.data("origin")) target_wp.data("origin", {
            left: target_wp.offset().left,
            top: target_wp.offset().top
        });
        o_x = target_wp.data("origin").left;
        o_y = target_wp.data("origin").top; // origin point

        last_angle = target_wp.data("last_angle") || 0;
    })

    $(document).mousemove(function (e) {
        if (dragging) {
            var s_x = e.pageX,
                s_y = e.pageY; // start rotate point
            if (s_x !== o_x && s_y !== o_y) { //start rotate
                var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin
                s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin
                s_rad += last_angle; // relative to the last one
                var degree = (s_rad * (360 / (2 * Math.PI)));

                // target_wp.css('-moz-transform', 'rotateX(70deg) rotateZ(' + degree + 'deg)');

                $("#trekMap").css('-webkit-transform', 'rotateX(70deg) rotateZ(' + degree + 'deg)');
                $("#trekMapShadow").css('-webkit-transform', 'rotateX(70deg) rotateZ(' + degree + 'deg)');

				
				//updateLabelLocations();

                $("#trekMapLabels").children().each(function (i, elm) {
					
					
 					var values = parseInt(degree);

                    var top =  parseInt($(this).css('top').slice(0,-2));
                    var left = parseInt($(this).css('left').slice(0,-2));

					
 								
								
								$(this).css("left", (left)  -1 + "px");
								$(this).css("top", (top)  -1 + "px");
				
					
					
				
      
                });




 ...