Question

我有一张图片。在那张图片上，我放了一张针图像，我想以一定的角度旋转它。一切都很完美。我想要的是改变针的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);的{{1}}值。

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>

Answer 2

在父div -webkit-transform: rotate(180deg); transform: rotate(180deg); 上添加 .tachometer 属性。我认为这是工作。

Answer 3

我找到的一个解决方案是transform: rotate(0deg);从-180deg开始并继续将我的值添加到-180deg。针将从底部移动到顶部。例如，我想将针旋转60度。我会这样做：-180-60 = -240

这是解决方法。

Answer 4

.tachometer {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 500px;
  width: 450px;
  background-image: url('http://speedhut.s3.amazonaws.com/temp/GL2-TACH-07/GL2-TACH-07_STANDARD-000000.png');
  background-repeat: no-repeat;
  z-index: 1;
}

.needle {
  z-index: 2;
  position: absolute;
  height: 100px;
  width: 100px;
  background-image: url('');
  background-repeat: no-repeat;
  left: 45%;
  bottom: 250px;
}

.arrow {
  height: 100px;
  transition: transform 2s linear;
  transform-origin: 29% 70%;
  transform-style: preserve-3D;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

<body>
  <div class="container">
    <div class="tachometer">
      <div class="needle">
        <img class="arrow" src=" https://openclipart.org/image/800px/svg_to_png/193053/arrow-up.png">
      </div>
    </div>
  </div>
</body>

这是一个工作片段。尝试将您的rotate属性从0更改为180

CSS：改变针的旋转角度

4 个答案: