html - CSS : Change angle of rotation of needle

Question

我有一张图片。在该图像上，我放置了一个针图像，我想将其旋转一定 Angular 。一切都运行良好。我想要的是改变针的 0 度位置。目前它在顶部，我想在底部制作 0 度点。请参阅下面的附图。

这是我为此编写的代码:HTML:

  <div class="container">
    <div class="tachometer">
      <div class="needle"></div>
    </div>
  </div>

CSS:

.tachometer {
  position: relative;
  top: 0px;
  left: 0px;
  height: 200px;
  width: 150px;
  background-image: url('../img/tachometer.svg');
  background-repeat: no-repeat;
}
.needle {
  position: absolute;
  height: 100px;
  width: 100px;
  background-image: url('../img/needle.svg');
  background-repeat: no-repeat;
  top: 35px;
  left: 8%;
  transition: transform 2s linear;
  transform-origin: 29% 70%;
  transform-style: preserve-3D;
  -webkit-transform: rotate(180deg);
  transform: rotate(0deg);
}

我不知道要进行此更改我缺少什么。请提出建议。

我将根据数据在运行时更改 transform: rotate(0deg); 的 .needle 的值。

Answer 1

为了创建一个表盘，您可以使用类似于下面的 CSS 来生成圆形。然后，您可以将 .inner 旋转到您希望的度数。

^{在此演示中，将圆圈悬停以查看 360 度旋转}

.outer {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 100px;
  background: lightgray;
  border-radius: 50%;
}
.needle {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transition: all 3s;
}
.needle:before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - 2.5px);
  height: 50%;
  width: 5px;
  background: black;
}
.needle:after {
  content: "";
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  height: 10px;
  width: 10px;
  transform: rotate(-135deg);
  transform-origin: top left;
  border-top: 5px solid black;
  border-left: 5px solid black;
}
.outer:hover .needle {
  transform: rotate(-360deg);
  transform-origin: center center;
}

<div class="outer">
  <div class="needle"></div>
</div>

---

轻微改动

如果您希望提供介于 0 和 360 之间的度数，您可以稍微更改 CSS 以便从 0 开始旋转。

.outer {
  position: relative;
  display: inline-block;
  height: 100px;
  width: 100px;
  background: lightgray;
  border-radius: 50%;
  transform:rotateX(180deg);
}
.needle {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transition: all 3s;
}
.needle:before {
  content: "";
  position: absolute;
  top: 0%;
  left: calc(50% - 2.5px);
  height: 50%;
  width: 5px;
  background: black;
}
.needle:after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  height: 10px;
  width: 10px;
  transform: rotate(45deg);
  transform-origin: top left;
  border-top: 5px solid black;
  border-left: 5px solid black;
}
.outer:hover .needle {
  transform: rotate(360deg);
  transform-origin: center center;
}

<div class="outer">
  <div class="needle"></div>
</div>