Question

我试图将图像从原点旋转（转换）为圆形，或者更确切地说是顺时针旋转。我已成功设置了相对于我的模态的图像的绝对中心。我完全控制了几分钟和几小时。问题是，我需要日期指示器（在这种情况下我只有夜间时间）来同时跟踪小时指示器（或＃34;手＆＃34;）。我只能设法手动完成：manual adjustment。但随着时间的推移，它会回到原来的位置，或类似的东西，我还没有看到每一步：out of circle。这是我的代码：
CSS：

#clock {
display: -webkit-box;
margin-left: auto;
margin-right: auto;
/*margin: 0 auto;*/
padding: 100px;
position: relative;
}
.minutes {
    position: absolute;
    /*top: -90px;
    left: -27px;*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    width: 208.5px;
    height: 208.5px;
    transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.hours {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    height: 155.5px;
    position: absolute;
    transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.night {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    z-index: 3;
    height: 50px;
    transform-origin: 120px 0px;
    -webkit-transform-origin: 120px 0px;
    -webkit-transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
    transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}

Javascript：

    let rings = [], elements = [];
rings = [{
  ring: 'minutes',
  angle: 0
},
{
  ring: 'hours',
  angle: 0
},
{
    ring: 'night',
    angle: 0
}
  ];

  for (let index = 0; index < rings.length; index++) {
    elements[index] = document.querySelector('.' + rings[index].ring);
  }
setInterval(function () {
    let now = new Date();
    minutes = now.getMinutes();
    hours = now.getHours();

    for (var id = 0; id < rings.length; id++) {
      if (rings[id].ring === 'minutes') {
        rings[id].angle = minutes * 6;
      } else if (rings[id].ring === 'hours') {
        rings[id].angle = (hours * 30) + (minutes / 2);
      } else if (rings[id].ring === 'night') {
        rings[id].angle = (hours * 30) + (minutes / 2);
      } else {
        console.log('Err: ');
      }

      elements[id].style.webkitTransform = 'rotateZ(' + rings[id].angle + 'deg)';
      elements[id].style.transform = 'rotateZ(' + rings[id].angle + 'deg);';
    }
  }, 1000);

HTML：

  <div id="clock">
      <img src="res/termina_clock/outside.png" alt="" class="minutes">
      <img src="res/termina_clock/inside.png" alt="" class="hours">
      <img src="res/termina_clock/night.png" alt="" class="night">
  </div>

Answer 1

您需要做的是在day/night内嵌套hours指示符。然后你可以精确定位它。

<div id="clock">
    <img src="http://i.imgur.com/4k04SRS.png" alt="" class="minutes">
    <div class="hours">
        <img src="http://i.imgur.com/9cQMi2m.png" alt="" class="night">
    </div>
</div>

我还必须摆脱您的自定义transform-origin，因为它不再需要并且正在弄乱定位。

.night {
    /*transform-origin: 120px 0px;*/
    /*-webkit-transform-origin: 120px 0px;*/
}

https://jsfiddle.net/5ak3zLy0/2/

如何顺时针旋转图像（从原点转换）CSS / Javascript

1 个答案: