CODEWITHSUNDEEP
htmlcss
Elaine Byene
Elaine Byene

Reputation: 4142

Place needle in the central base of the speedometer

I'm trying to position the base of the needle in the center-bottom of the speedometer in one place and not move it.

Please note that I cannot change the HTML except the degree which is transform: rotate(40deg) to say transform: rotate(-80deg) but not more. I can however edit the CSS.

.speedometer {
  display: inline-block;
  width: 200px;
  height: 109px;
  overflow:hidden;
  margin: 0 auto;
  text-align: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.needle {
  width: 25px;
  height: 70px;
  left: 90px;
  position: absolute;
  top: 40px;
  transform-origin: bottom;
  background-size: contain;
  background-repeat: no-repeat;
}
<div>
  <div class="speedometer" style="background-image: url('https://i.ibb.co/LQCv5CR/taxometer.png')"></div>
  <div class="needle" style="background-image: url('https://i.ibb.co/JrthWtD/needle.png'); transform: rotate(40deg);"></div>
  <div class="needle" style="background-image: url('https://i.ibb.co/JrthWtD/needle.png'); transform: rotate(-80deg);"></div>
</div>

Upvotes: 0

Views: 411

Answers (2)

Temani Afif
Temani Afif

Reputation: 272817

First make the main element having the speedometer background so the needle are child elemens. Then place them relatively to the speedometer at the bottom and center them horizontally. Finally adjust the transform origin so it's exactly the centre of the circle of the needle.

.speedometer {
  width: 200px;
  height: 109px;
  margin: 0 auto;
  background: url('https://i.ibb.co/LQCv5CR/taxometer.png') center/contain no-repeat;
  position: relative;
}

.needle {
  position: absolute;
  left: calc(50% - 12px);
  bottom: -6px;
  width: 24px;
  height:78px;
  transform-origin: 50% calc(100% - 12px);
  background: url('https://i.ibb.co/JrthWtD/needle.png') center/contain no-repeat;
}
<div class="speedometer" >
  <div class="needle" style=" transform: rotate(40deg);"></div>
  <div class="needle" style=" transform: rotate(10deg);"></div>
  <div class="needle" style=" transform: rotate(-60deg);"></div>
  <div class="needle" style=" transform: rotate(80deg);"></div>
  <div class="needle" style=" transform: rotate(-90deg);"></div>
</div>

And since it's about one needle you can optimize like below:

.speedometer {
  width: 200px;
  height: 109px;
  display:inline-block;
  background: url('https://i.ibb.co/LQCv5CR/taxometer.png') center/contain no-repeat;
  position: relative;
}

.speedometer::before {
  content:"";
  position: absolute;
  left: calc(50% - 12px);
  bottom: -6px;
  width: 24px;
  height:78px;
  transform-origin: 50% calc(100% - 12px);
  background: url('https://i.ibb.co/JrthWtD/needle.png') center/contain no-repeat;
  transform:rotate(var(--r,0deg));
  transition:0.8s;
}

.speedometer:hover::before {
  transform:rotate(0deg);
}
<div class="speedometer" style="--r:60deg">
</div>
<div class="speedometer" style="--r:-50deg">
</div>
<div class="speedometer" style="--r:-80deg">
</div>

Upvotes: 3

Fabrizio Botalla
Fabrizio Botalla

Reputation: 742

Here is a solution to your question (if I understand it right).

Note the few changes. The two needles div are different, they should not be under the same CSS property. 

.speedometer {
  display: inline-block;
  width: 200px;
  height: 109px;
  overflow:hidden;
  margin: 0 auto;
  text-align: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.needle1 {
  width: 25px;
  height: 70px;
  left: 90px;
  position: absolute;
  top: 40px;
  text-align: center;
  transform-origin: bottom;
  background-size: contain;
  background-repeat: no-repeat;
}
.needle2 {
  width: 25px;
  height: 60px;
  left: 105px;
  position: absolute;
  top: 40px;
  transform-origin: bottom;
  background-size: contain;
  background-repeat: no-repeat;
}
<div>
  <div class="speedometer" style="background-image: url('https://i.ibb.co/LQCv5CR/taxometer.png')"></div>
  <div class="needle1" style="background-image: url('https://i.ibb.co/JrthWtD/needle.png'); transform: rotate(40deg);"></div>
  <div class="needle2" style="background-image: url('https://i.ibb.co/JrthWtD/needle.png'); transform: rotate(-80deg);"></div>
</div>

Upvotes: 1

Related Questions