在x和y变换过程中改变div高度大小
在x和y变换过程中改变div高度大小
提问于 2022-05-06 05:11:46
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点的位置上没有完全扩展。
如果对结果有更多的控制，还有什么方法可以做到这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-05-06 07:04:32
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72136450
复制相关文章
相似问题
腾讯云开发者
