Javascript 如何在CSS和JS中滚动创建插图

我看过一个网站，开始思考如何制作一幅纸火箭在立方体贝泽中移动的插图，如图1所示

网站。帮助我做它与CSS的滚动。我尝试了以下代码，但失败了

$（函数（）{
变量旋转=0，
scrollLoc=$（文档）.scrollTop（）；
$（窗口）。滚动（函数（）{
var newLoc=$（document.scrollTop（）；
var diff=滚动定位-新定位；
旋转+=差异，滚动位置=新位置；
var rotationStr=“旋转（“+旋转+”度）”；
$（“.plane”）.css({
“-webkit变换”：旋转TR，
“-moz变换”：旋转TR，
“变换”：旋转
});
});
})

正文{
溢出x：隐藏；
}
.集装箱{
宽度：100%；
高度：1000px；
}

---

如果希望平面四处移动而不是旋转，则可以使用

translate3d

来代替或旋转

$（函数（）{
函数更新翻译（el，x）{
常数y=（数学cos（x*0.015）*50）+100；
const tStr=`translate3d（${-x}px，${y}px，0px）`；
$（“.plane”）.css({
“-webkit转换”：tStr，
“-moz变换”：tStr，
“转型”：tStr
});
}
var转换=0，
scrollLoc=$（文档）.scrollTop（）；
更新翻译（$（“.plane”），0；
$（窗口）。滚动（函数（）{
var newLoc=$（document.scrollTop（）；
var diff=滚动定位-新定位；
翻译+=diff，scrollLoc=newLoc；
更新翻译（$（“.plane”）、翻译；
});
})

正文{
溢出x：隐藏；
}
.集装箱{
宽度：100%；
高度：1000px；
}
img{
位置：固定；
/*转换：100毫秒转换轻松*/
}

$（“.plane”）

似乎与任何element@haim770这是img标签的类，请看这个，谢谢你。你可以找到这个例子[很有帮助][1]，但是你必须添加Javascript来处理用户滚动。[1] ：可能重复@Alex请不要拒绝投票或标记为垃圾邮件。我只是想学习CSS和JS。我不明白你说的话，谢谢你的帮助answer@Madhu什么意思？有什么不合理的吗？火箭应该像在网站上那样以曲线运动。@Madhu像这样吗？是的，你明白了