在 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();

我有一张钟面图片，它没有直接面向用户，而是 45 度角。我希望时钟指针根据它们在钟面上的位置稍微调整它们的高度。为了视觉错觉。
当我按原样使用代码时，我稍微得到了预期的效果，但是时钟指针在时钟上的 5-8 标记处变细，秒针在 12 点钟和 6 点钟位置没有完全伸展....
还有什么方法可以更好地控制结果？

Answer 1

CSS 可以在 3d 模式下工作，因此如果您旋转表盘，指针将自动调整其高度和宽度。

这是一个简单的例子。该代码片段使旋转角度为 80 度而不是 45 度，这样您就可以清楚地看到指针正在根据它们的位置进行调整。

您显然需要考虑您希望观察者相对于整个场景的位置，而不仅仅是相对于时钟。所以 perspective-origin 和职位需要调查。

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>

在 x 和 y 的转换过程中更改 div 高度大小

changing div height size during transform for x and y

javascript

css

rotatetransform