X和Y变换期间的DIV高度大小

Question

js

setInterval(() => {
        let d = new Date();
        let sec = d.getSeconds();
        let min = d.getMinutes();
        let hrs = d.getHours();

const hourRotation = 30 * hrs + min / 2;
const minRotation = 6 * min;
const secondRotation = 6 * sec;

hours.style.transform = `rotate(${hourRotation}deg)`
minutes.style.transform = `rotate(${minRotation}deg)`
seconds.style.transform = `rotate3d(.5, .005, .6, ${secondRotation}deg)`

}, 1000)

new Date().getMinutes();
new Date().getSeconds();

＆nbsp;＆nbsp;＆nbsp;＆nbsp;我有一个不直接面对用户的时钟面图像，它的成角度为45度。我希望时钟可以根据时钟面的位置来稍微调节其高度。为了光学幻觉。
＆nbsp;＆nbsp;＆nbsp;＆nbsp;当我按原样使用代码时，我会稍微获得所需的效果，但是时钟手在时钟左右较薄，而秒针也不会完全扩展12 o时钟和6 o时钟位置....
通过更多地控制结果，这是什么方法？

Answer 1

CSS可以在3D中工作，因此，如果您旋转时钟面，则手将自动调整其高度和宽度。

这是一个简单的例子。片段使旋转角度80而不是45度，以便您可以清楚地看到手正在根据其位置进行调整。

显然，您需要考虑希望观察者与整个场景相关的位置，而不仅仅是与时钟相关的位置。因此，将需要研究视角 - 原始位置。

const hours = document.querySelector('.hours');
const minutes = document.querySelector('.minutes');
const seconds = document.querySelector('.seconds');
setInterval(() => {
  let d = new Date();
  let sec = d.getSeconds();
  let min = d.getMinutes();
  let hrs = d.getHours();

  const hourRotation = 30 * hrs + min / 2;
  const minRotation = 6 * min;
  const secondRotation = 6 * sec;

  hours.style.transform = `rotate(${hourRotation}deg)`
  minutes.style.transform = `rotate(${minRotation}deg)`
  //seconds.style.transform = `rotate3d(.5, .005, .6, ${secondRotation}deg)`
  seconds.style.transform = `rotate(${secondRotation}deg)`

}, 1000)

* {
  margin: 0;
  padding: 0;
}

.container {
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vmin;
  position: relative;
}

.clockface {
  position: relative;
  width: 50vmin;
  height: 50vmin;
  background: gray;
  border-radius: 50%;
  transform: rotateY(-80deg);
  transform-style: preserve-3d;
}

.clockface>* {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 2.5%);
  width: 5%;
  height: 50%;
  transform-origin: 50% 98%;
}

.hours {
  background: red;
}

.minutes {
  background: green;
}

.seconds {
  background: blue;
}

<div class="container">
  <div class="clockface">
    <div class="hours"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
  </div>
</div>