使用jquery或js根据浏览器宽度动态更改css属性

Question

很长一段时间潜伏在这里。我希望也许你们中的一个可以帮助我。基本上我想做的是创建一个响应式翻转“3d”立方体，在悬停时“翻转”。

我倒下的立方体。我建立了自己的on this灵感。我遇到的问题是使该多维数据集响应。我想我知道这个问题......因为translatez值需要根据浏览器宽度动态变化。

message+=$(paste <(echo "${arr[0]}") <(echo "$starttimeF") <(echo "$ttime") <(echo "$time") | column -t)

echo "$message"

在这个示例中，translatez负责多维数据集的“角落”，我需要它根据多维数据集的当前高度动态更改。

我的实际设置使用bootstrap 12网格布局，立方体的宽度设置为100％。这意味着多维数据集的高度根据浏览器宽度动态变化。我需要立方体（translatez）的“角落”根据每个立方体的实际当前高度进行更改。

我已经尽力找到关于如何成功实现这一目标的基本解释，但我已经空了。我找到了具有响应式3D立方体组合的专业模板，当调整窗口大小时，我可以看到它们完全像我怀疑的那样。他们使用JS或Jquery以小增量（+ - 0.5px /步）更改像素值，具体取决于浏览器宽度。我宁愿不链接该模板，因为我不想把它变成他们的广告机会。

有人能指出我正确的方向吗？我非常感谢任何帮助。

提前致谢：）

Answer 1

您始终可以从javascript应用CSS样式，试试这个

var obj = document.getElementById("object");
obj.style.transform = "translateZ(100px);";