Element Rotation With Arrow

Question

As you see in this image, inside the dark gray ball is a number. It’s 100. That means the pointer has to hit 100.

If it’s 0, it has to be in the middle of the pointer.

The issue is that this value of the NPS (Net Promoter Score) is -100 to 100.

I cannot account for this pointer to rotate according to the number inside that can range from -100 to -100.

So far:

CSS

.meter{
    position: relative;
    .round{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: -3px;
        bottom: -14px;
        margin: auto;
        width: 91px;
        height: 91px;
        border-radius: 50%;
        background-color: #3d3d3d;
        z-index: 1;
        &:after{
            content: "";
            position: absolute;
            top: -19px;
            left: 35px;
            z-index: 2;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 10px 20px 10px;
            border-color: transparent transparent #3d3d3d transparent;
        }
    }
    > img{
        vertical-align: middle;
        width: 170px;
        margin: auto;
    }

    .result{
        position: absolute;
        top: 0;
        font-size: 30px;
        color: #FFF;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 2;
        margin: auto;
        height: 45px;
        text-align: center;
        small{
            font-size: 12px;
            margin-top: -10px;
            display: block;
        }
    }
}

HTML

<div class="meter">
   <div class="round"></div>
   <img src="images/dash/meter.png">
   <span class="result">100<small>NPS</small></span>
</div>

I put on JS Fiddle for better resolution:

https://jsfiddle.net/x491kxcy/

Answer 1

You can use the property transform-origin, in the pseudo element :after, define it in the center of the parent element. See

-ms-transform-origin: 11px 58px; 
-moz-transform-origin: 11px 58px; 
-webkit-transform-origin: 11px 58px; 
transform-origin: 11px 58px; /* Centraliza o ponto base para rotação */

So just put the desired rotation, I put as an example in a Hover:

.meter:hover .round:after{
  -ms-transform: rotate(-45deg); 
  -webkit-transform: rotate(-45deg); 
  transform: rotate(-45deg);
}

Working: https://jsfiddle.net/x491kxcy/5/

As for the calculation, just know that -100 on the pointer, worth the -140 degrees, so any other value is a simple rule of three. For example, if you want to find -50.

  -140 --- -100
    x  --- -50

   x = -70

So for the arrow stop at -50 just put -70deg in the rotation of css.