Измените иглу спидометра с помощью CSS

Question

Можно ли изменить значение вращения иглы с помощью встроенного преобразования cal c (% метаданных%) Я не знаю, возможно ли это с формулой в нем?

Возможные значения метаданных могут быть от 0 до 100, 0 должен быть эквивалентен -90deg, а 100 должен быть эквивалентен 90deg

Я хочу, чтобы значение метаданных, которое составляет 0 - 100, было преобразовано в град с использованием Cal c, но я не знаю, как.

<div id="logo"> <span class="speedometer"></span>
    <span class="needle" style="transform:rotate(%metadata%);"></span>
</div>

#logo {
    display: inline-block;
    position: relative;
}
#logo .speedometer {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 20px solid tomato;
    border-right: 20px solid white;
    border-bottom: 20px solid white;
    -webkit-transform: rotate(45deg);
    display: inline-block;
}
#logo .needle {
    width: 5px;
    height: 50px;
    background: #999999;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    display: inline-block;
    left: 57px;
    position: absolute;
    top: 10px;
    transform-origin:bottom;
}

<div id="logo">	<span class="speedometer"></span>
	<span class="needle" style="transform:rotate(-90deg);"></span>
</div>

Answer 1

Используйте CSS переменные для этого:

#logo {
    display: inline-block;
    position: relative;
}
#logo .speedometer {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 20px solid tomato;
    border-right: 20px solid white;
    border-bottom: 20px solid white;
    transform: rotate(45deg);
    display: inline-block;
}
#logo .needle {
    width: 5px;
    height: 50px;
    background: #999999;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    display: inline-block;
    left: 57px;
    position: absolute;
    top: 10px;
    transform-origin:bottom;
    transform:rotate(calc(var(--r)*1.8deg - 90deg));
}

<div id="logo">	<span class="speedometer"></span>
	<span class="needle" style="--r:0"></span>
</div>
<div id="logo">	<span class="speedometer"></span>
	<span class="needle" style="--r:20"></span>
</div>
<div id="logo">	<span class="speedometer"></span>
	<span class="needle" style="--r:50"></span>
</div>
<div id="logo">	<span class="speedometer"></span>
	<span class="needle" style="--r:80"></span>
</div>
<div id="logo">	<span class="speedometer"></span>
	<span class="needle" style="--r:100"></span>
</div>

Вы также можете упростить свой код, как показано ниже:

.speedometer {
  width: 80px;
  height: 40px;
  border-radius: 100px 100px 0 0;
  border: 20px solid tomato;
  border-bottom: none;
  display: inline-block;
  position: relative;
}

.speedometer::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 50px;
  background: #999999;
  border-radius: 100% 100% 5px 5px;
  left: calc(50% - 3px);
  bottom: 3px;
  transform-origin: bottom;
  transform: rotate(calc(var(--r)*1.8deg - 90deg));
}

<span style="--r:0" class="speedometer"></span>
<span style="--r:20" class="speedometer"></span>
<span style="--r:50" class="speedometer"></span>
<span style="--r:80" class="speedometer"></span>
<span style="--r:100" class="speedometer"></span>