Как закрепить стрелку?

102

19 апреля 2021, 12:40

У меня есть шкала со стрелкой и 12 checkbox. При клике по checkbox, стрелка меняет своё положение (transform/rotate), но у меня не получается её закрепить. То есть, верх стрелки движется нормально, а нижняя её часть смещается. Изначально она в таком положении: А после выбора checkbox: Стрелка смещается, и я не понимаю, как сделать так, чтобы её нижняя часть не выходила за границу шкалы (или проще говоря: не смещалась вниз или другие стороны). Буду рад любой подсказке или помощи. Заранее благодарю!

const COUNTER_STEP = 250; 
 
class Checkbox { 
  constructor(node) { 
    this.node = node; 
 
    if (!this.node) return; 
 
    this.counter = 0; 
 
    this.onClick = this.onClick.bind(this); 
 
    this.node.addEventListener('click', this.onClick, false); 
  } 
 
  onClick(e) { 
    const checkbox = e.target.closest('input[type="checkbox"]'); 
 
    if (!checkbox) return; 
 
    this.isChecked(checkbox) ? this.decrease() : this.increase(); 
  } 
 
  isChecked(checkbox) { 
    return !checkbox.checked; 
  } 
 
  increase() { 
    this.counter += COUNTER_STEP; 
    document.querySelector('#arrow').style.transform = 'rotate(' + (-40 + ((this.counter * 70) / 1000)) + 'deg)'; 
    document.querySelector('#counter').innerHTML = this.counter; 
  } 
 
  decrease() { 
    this.counter -= COUNTER_STEP; 
    document.querySelector('#arrow').style.transform = 'rotate(' + (-40 + ((this.counter * 70) / 1000)) + 'deg)'; 
    document.querySelector('#counter').innerHTML = this.counter; 
  } 
} 
 
new Checkbox(document.querySelector('.mainCont'));

@import url('https://fonts.googleapis.com/css?family=Roboto:500&display=swap'); 
*{ 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Roboto', sans-serif !important; 
  font-weight: 500; 
} 
body{ 
  width: 100%; 
  height: 100%; 
  font-size: 12px; 
  background-color: #f0f0f0 !important; 
} 
/* обёртка старт*/ 
.wrapp{ 
  width: 662px; 
  margin-top: 60px; 
  margin-bottom: 100px; 
  margin-right: auto; 
  margin-left: auto; 
  background-color: #fff; 
  background-image: url('../img/bg.png'); 
} 
/* обёртка финиш*/ 
 
/* основные контейнеры старт */ 
header{ 
  height: 250px; 
  padding: 10px 20px 0px 20px; 
  vertical-align: middle; 
} 
.mainCont{ 
  padding-bottom: 35px; 
  padding-top: 20px; 
  padding-left: 20px; 
  padding-right: 15px; 
} 
.conAvat{ 
  width: 120px; 
  height: 187px; 
  float: left; 
  position: relative; 
} 
/* основные контейнеры финиш */ 
 
/* второстепенные контейнеры старт */ 
.inp{ 
  width: 79%; 
  float: right; 
  position: relative; 
  padding-top: 9px; 
} 
.skills1{ 
  padding-left: 3px; 
} 
.skills2{ 
  padding-top: 33px; 
  padding-left: 3px; 
} 
.skills3{ 
  padding-top: 32px; 
  padding-left: 3px; 
} 
.meter{ 
  height: 250px; 
} 
/* второстепенные контейнеры финиш */ 
 
.conAvat img{ 
  max-width: 140px; 
  max-height: 187px; 
} 
.inp input{ 
  border: none; 
  border-radius: 0px; 
  border-bottom: 2px solid #333333; 
  font-style: medium; 
  font-size: 12px; 
} 
.inp img{ 
  z-index: 9999; 
  position: absolute; 
  right: 0px; 
  top: 60px; 
} 
#ava{ 
  clip-path: circle(); 
} 
.skls{ 
  font-size: 18px; 
  padding-top: 13px; 
  padding-bottom: 14px; 
  padding-left: 4px; 
  font-weight: bold; 
} 
#labell{ 
  color: #666666 !important; 
  font-weight: bold !important; 
  font-size: 12px !important; 
  padding-top: 3px; 
  padding-left: 0px !important; 
  margin-left: 0px !important; 
} 
.metImage{ 
  width: 320px; 
  height: 100%; 
  position: relative; 
  float: left; 
} 
/* стрелка и шкала старт*/ 
#arrow{ 
  position: absolute; 
  z-index: 100; 
  transform-origin: center; 
  left: 33%; 
  top: 65%; 
  transform: rotate(-40deg); 
} 
#meter{ 
  padding-top: 60px; 
  padding-left: 22px; 
/* стрелка и шкала конец*/ 
} 
p{ 
  font-weight: bold; 
  margin-bottom: 0 !important; 
} 
hr{ 
  margin: 0 !important; 
  padding: 0 !important; 
} 
.count{ 
  padding-top: 65px; 
  padding-left: 2px; 
} 
#counter{ 
  font-size: 50px; 
  color: #5392d4; 
  padding-top: 0px; 
} 
 /* ///////////////////////////////// */

<div class="mainCont" > 
        <h5 class="skls">Навыки</h5> 
        <div class="row skills1"> 
          <div class="col"> 
            <div class="custom-control custom-checkbox"> 
              <input type="checkbox" name="html" class="custom-control-input" id="customCheck1"> 
              <label id="labell" class="custom-control-label" for="customCheck1">HTML5</label> 
            </div> 
          </div> 
          <div class="col"> 
            <div class="custom-control custom-checkbox custom-control-inline"> 
              <input type="checkbox" class="custom-control-input" id="customCheck2"> 
              <label id="labell" class="custom-control-label" for="customCheck2">SASS</label> 
            </div> 
          </div> 
          <div class="col"> 
            <div class="custom-control custom-checkbox"> 
              <input type="checkbox" class="custom-control-input" id="customCheck3"> 
              <label id="labell" class="custom-control-label" for="customCheck3">VANILLAJS</label> 
            </div> 
          </div> 
          <div class="col mr-3"> 
            <div class="custom-control custom-checkbox"> 
              <input type="checkbox" class="custom-control-input" id="customCheck4"> 
              <label id="labell" class="custom-control-label" for="customCheck4">GIT</label> 
            </div> 
          </div> 
        </div> 
<!-- ///////////////////////////////////////////////////////////////////////// --> 
      <div class="row skills2"> 
        <div class="col"> 
          <div class="custom-control custom-checkbox"> 
            <input type="checkbox" class="custom-control-input" id="customCheck5"> 
            <label id="labell" class="custom-control-label" for="customCheck5">CSS3</label> 
          </div> 
        </div> 
        <div class="col"> 
          <div class="custom-control custom-checkbox"> 
            <input type="checkbox" class="custom-control-input" id="customCheck6"> 
            <label id="labell" class="custom-control-label" for="customCheck6">LESS</label> 
          </div> 
        </div> 
        <div class="col mr-1"> 
          <div class="custom-control custom-checkbox"> 
            <input type="checkbox" class="custom-control-input" id="customCheck7"> 
            <label id="labell" class="custom-control-label" for="customCheck7">ANGULAR</label> 
          </div> 
        </div> 
        <div class="col mr-3"> 
          <div class="custom-control custom-checkbox"> 
            <input type="checkbox" class="custom-control-input" id="customCheck8"> 
            <label id="labell" class="custom-control-label" for="customCheck8">FOUNDATION</label> 
          </div> 
        </div> 
      </div> 
<!-- ///////////////////////////////////////////////////////////////////////// --> 
      <div class="row skills3"> 
        <div class="col"> 
          <div class="custom-control custom-checkbox"> 
            <input type="checkbox" class="custom-control-input" id="customCheck9"> 
            <label id="labell" class="custom-control-label" for="customCheck9">БЭМ</label> 
          </div> 
        </div> 
        <div class="col"> 
          <div class="custom-control custom-checkbox"> 
            <input type="checkbox" class="custom-control-input" id="customCheck10"> 
            <label id="labell" class="custom-control-label" for="customCheck10">GULP</label> 
          </div> 
        </div> 
        <div class="col mr-1"> 
          <div class="custom-control custom-checkbox"> 
            <input type="checkbox" class="custom-control-input" id="customCheck11"> 
            <label id="labell" class="custom-control-label" for="customCheck11">JQUERY</label> 
          </div> 
        </div> 
        <div class="col mr-3"> 
          <div class="custom-control custom-checkbox"> 
            <input type="checkbox" class="custom-control-input" id="customCheck12"> 
            <label id="labell" class="custom-control-label" for="customCheck12">BOOTSTRAP</label> 
          </div> 
        </div> 
      </div> 
    </div> 
      <hr> 
<!-- ///////////////////////////////////////////////////////////////////////// --> 
    <div class="row meter"> 
      <div class="col metImage float-left"> 
        <img id="meter" src="img/meter.png" alt="meter"> 
        <img id="arrow"src="img/arrow.png" alt="arrow"> 
        </div> 
 
<!-- ///////////////////////////////////////////////////////////////////////// --> 
      <div class="col count float-right"> 
        <p>Мой уровень владения <br>Java Script</p> 
        <label id="counter" for="">0</label> 
      </div> 
      </div>

Answer 1

Нужно вращать относительно центра круга, а не центра стрелки. Попробуй что-то такое подобрать: