在调整窗口大小时更改skewY角度
在调整窗口大小时更改skewY角度
提问于 2019-07-20 22:22:56
请不要使用jQuery和SCCS (即使我在这里使用UIkit3进行样式设置)。导航栏有一个倾斜的背景图像，这是通过CSS中的线性渐变和固定高度完成的。我的方法是使用transform: skewY并在onresize上更改角度值。我可以在控制台中看到值发生变化，但它似乎不会影响站点。
window.onresize = function(event) {
w = window.innerWidth;
h = 140;
document.getElementById('Rhombus').style.transform="skewY('-Math.atan(h/w)*180/Math.PI )+'deg)";
alpha = Math.atan(h/w)*180/Math.PI;
console.log(w, h, -alpha);
};下面的容器#Rhombus也应该使用与头部相同的角度。
回答 2
Stack Overflow用户
发布于 2019-07-21 02:57:15
我相信您的字符串中存在语法错误，请尝试使用ES6字符串替换，如下所示：
window.onresize = function(event) {
w = window.innerWidth;
h = 140;
alpha = Math.atan(h/w)*180/Math.PI;
document.getElementById('Rhombus').style.transform="skewY(`${-alpha}deg`)";
console.log(w, h, -alpha);
};Stack Overflow用户
发布于 2019-07-21 09:14:24
我实际上找到了一个解决方案，使用CSS变量并在JS中更新这些变量：
window.onresize = function(event) {
root = document.documentElement;
w = window.innerWidth;
h = 140;
alpha = Math.atan(h/w)*180/Math.PI;
document.getElementById('Rhombus').style.transform="skewY(`${-alpha}deg`)";
console.log(w, h, -alpha);
root.style.setProperty('--atan', -alpha + "deg");
root.style.setProperty('--tan', alpha + "deg");
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57125589
复制相关文章
相似问题
腾讯云开发者
