Javascript 带有JQuery和CSS的3D旋转木马-未正确渲染

我正在尝试用JQuery和CSS实现一个CD转盘，我在StackOverflow上浏览了一些想法。我偶然发现。我一直在尝试在我自己的机器上实现idea 2的代码，但它似乎不起作用

以下是所有代码：

/*创建一个数组以容纳不同的图像位置*/
var itemPositions=[]；
var numberOfItems=$（'#scroller.item'）.length；
/*根据每个数组元素的初始位置为其分配一个CSS类*/
函数赋值位置（）{
对于（变量i=0；i
html，
身体{
身高：100%；
保证金：0；
}
身体{
背景：-webkit线性梯度（顶部，#4d0，#4d180px，#9393400px）；
}
.警告{
保证金：10px自动0；
宽度：500px；
文本对齐：居中；
字体大小：20px；
}
#卷轴{
宽度：500px；
高度：200px；
保证金：0自动；
填充：50px0；
-webkit透视图：500px；
-moz透视图：500px；
-o-透视图：500px；
}
#滚动条。项目{
宽度：500px；
显示：块；
位置：绝对位置；
边界半径：10px；
-webkit框反射：低于0px-webkit渐变（线性、左上、左下、从（透明）、颜色停止（.85，透明）到（rgba（255、255、255、0.15））；
-webkit过渡：所有0.4s易入易出；
-moz转换：所有0.4易入易出；
-o型过渡：所有0.4s易于输入输出；
z指数：0；
}
/*由于嵌入阴影不能很好地处理图像，因此我们将创建一个伪元素，并将图像样式应用于该元素*/
#滚动条。项目：之前{
边界半径：10px；
宽度：500px；
显示：块；
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
框阴影：插入0 0 1px rgba（255，255，255，0.3），0 0 0 1px rgba（0，0，0，0.4）；
}
#滚动条。项目img{
显示：块；
边界半径：10px；
}
#滚动条，左边{
-webkit变换：旋转（25度）translateX（-320px）歪斜（-5度）比例（0.4,0.6）；
-莫兹变换：旋转（25度）平移（-320px）倾斜（-5度）标度（0.4,0.6）；
-o变换：旋转（25度）平移（-320px）倾斜（-5度）标度（0.4,0.6）；
}
#卷轴，中间{
z指数：1；
-webkit变换：旋转（0度）平移（0）比例（1）；
-moz变换：旋转（0度）平移（0）缩放（1）；
-o变换：旋转（0度）平移（0）缩放（1）；
}
#卷轴，对{
-webkit变换：旋转（-25度）平移（320像素）倾斜（5度）比例（0.4,0.6）；
-莫兹变换：旋转（-25度）平移（320像素）倾斜（5度）比例（0.4,0.6）；
-o变换：旋转（-25度）平移（320像素）倾斜（5度）刻度（0.4,0.6）；
}
#滚动条，左隐藏{
不透明度：0；
z指数：-1；
-webkit变换：旋转（25度）translateX（-430px）歪斜（-5度）比例（0.3,0.5）；
-莫兹变换：旋转（25度）平移（-430px）倾斜（-5度）标度（0.3,0.5）；
-o变换：旋转（25度）平移（-430px）倾斜（-5度）标度（0.3,0.5）；
}
#滚动条，右隐藏{
不透明度：0；
z指数：-1；
-webkit变换：旋转（-25度）平移（430px）倾斜（5度）比例（0.3,0.5）；
-莫兹变换：旋转（-25度）平移（430px）倾斜（5度）比例（0.3,0.5）；
-o变换：旋转（-25度）平移（430px）倾斜（5度）标度（0.3,0.5）；
}
.导航{
位置：绝对位置；
宽度：500px；
高度：30px；
利润率：170px0；
z指数：2；
显示：无；
}
.prev，
.下一个{
位置：绝对位置；
显示：块；
高度：30px；
宽度：30px；
背景色：rgba（0,0,0,0.85）；
边界半径：15px；
颜色：#e4；
底部：15px；
左：15px；
文本对齐：居中；
线高：26px；
光标：指针；
框阴影：插入0 0 1px rgba（255，255，255，0.5），0 0 0 1px rgba（0，0，0，0.7）；
}
.下一个{
左：继承；
右：15px；
}
.prev:悬停，
.下一步：悬停{
框阴影：插入0 0 0 2pxRGBA（255，255，255，0.5），0 0 0 1pxRGBA（0，0，0，0.7）；
}
我使用npm lite在本地测试了您的代码，发现了相同的错误，直到我移动了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>



在
标记之外，在html代码的其余部分之后，但在关闭
标记之前

我在chrome和firefox中都测试了这个，现在它工作得很好
我使用npm lite在本地测试了您的代码，发现了相同的错误，直到我移动了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>



在
标记之外，在html代码的其余部分之后，但在关闭