Javascript 使圆元素在透视图中旋转

我试着用透视图来画这个圆圈（检查小提琴链接）。我尝试了css属性，但它显示出不寻常的行为

/*
使用：
圆形定位代码：
http://stackoverflow.com/a/10152437/1644202
指向：
http://pointat.idenations.com/api
取决于：
jquery
https://github.com/thomas-dotworx/jqrotate （指向）
*/
函数createFields（）{
$（'.field'）.remove（）；
var container=$（“#container”）；
对于（var i=0；i<+$（'input:text'）.val（）；i++）{
$('', {
“类”：“字段”，
“文本”：i+1，
}).附在（容器）上；
}
}
功能分布场（度）{
度=度| | 0；
var半径=200；
变量字段=$（'.field:not（[deleting]）），容器=$（'#container'），
宽度=容器。宽度（），高度=容器。高度（），
角度=deg | | Math.PI*3.5，步长=（2*Math.PI）/fields.length；
字段。每个（函数（）{
var x=Math.round（宽度/2+半径*Math.cos（角度）-$（this.width（）/2）；
变量y=Math.round（高度/2+半径*Math.sin（角度）-$（此）.height（）/2）；
if（window.console）{
console.log（$（this.text（），x，y）；
}
$（this.css）({
左：x+‘px’，
顶部：y+‘px’
});
角度+=步长；
});
}
$（'input'）.change（函数（）{
createFields（）；
distributeFields（）；
initPointAt（）；
});
var timer=null，
timer2=null；
$（'#addone'）。单击（函数（）{
//不要附加到current，否则会看到它在容器中移动
$（'.field'）.addClass（'moveAni'）；
$('', {
“类”：“字段”，
'文本'：$（'.field'）。长度+1
})
.css({
左：$（“#容器”）.width（）/2-25+“px”，
顶部：$（“#容器”）.height（）/2-25+'px'}）
.addClass（'moveAni'））
.appendTo（“#container”）
波塔特先生({
目标：“中心”，
默认方向：“向下”
});
distributeFields（）；
//没有css：
//$（'.field'）.pointat（“updateRotation”）；
//使用css：用于css移动动画
clearInterval（计时器）；clearTimeout（计时器2）；
计时器=设置间隔（函数（）{
$（'.field'）.pointat({
目标：“中心”，
默认方向：“向下”
})；//似乎更新不正确：.pointat（“updateRotation”）
}, 20);
timer2=setTimeout（函数（）{
清除间隔（计时器）；
}，420）；//css动画超时，ani后要更新的额外间隔+1
//更新输入字段
$（'input:text'）.val（$（'field'）.length）；
});
$（'#delone'）。单击（函数（）{
$（'#container.field:not（[删除]）：last'）
.attr（'删除'，'真'）
.css({
左：$（“#容器”）.width（）/2-25+“px”，
顶部：$（“#容器”）.height（）/2-25+“px”
})
.fadeOut（400，函数（）{
$（this.remove（）；
});
//执行分发，就好像当前输出的动画字段已准备就绪一样
distributeFields（）；
clearInterval（计时器）；clearTimeout（计时器2）；
计时器=设置间隔（函数（）{
$（'.field'）.pointat({
目标：“中心”，
默认方向：“向下”
})；//似乎更新不正确：.pointat（“updateRotation”）
}, 20);
timer2=setTimeout（函数（）{
清除间隔（计时器）；
}，420）；//css动画超时，ani后要更新的额外间隔+1
//更新输入字段
$（'input:text'）.val（$（'.field:not（[deleting]））.length）；//是否更新
});
createFields（）；
distributeFields（）；
initPointAt（）；
函数initPointAt（）{
$（'.field'）.pointat({
目标：“中心”，
默认方向：“向下”，
X更正：-20，
Y校正：-20
});
}

body{padding:2em；}
#容器{宽度：600px；高度：600px；边框：1px实心#000；位置：相对；边框半径：50%；}
#中心{宽度：10px；高度：10px；位置：绝对；左侧：295px；顶部：295px；背景：#000；边框半径：50%；}
.field{位置：绝对；背景：#f00；}
#十字线-x{宽度：600px；高度：1px；背景：#000；位置：绝对；左侧：0；顶部：300px；}
#十字线-y{宽度：1px；高度：600px；背景：#000；位置：绝对；左侧：300px；顶部：0；}
.场{
宽度：50px；
高度：50px；
线高：50px；
文本对齐：居中；
}
莫瓦尼先生{
过渡：左侧400ms缓解，顶部400ms缓解；
}

字段数：
++
--

将容器包装在另一个应用透视图的div中。透视图必须应用于父元素，而不是元素本身

更新的小提琴链接：

#透视图{
透视图：500px；
宽度：150px；
}
#容器{
变换：旋转（40度）；
背景：浅蓝色；
高度：150像素；
}

一些透视图内容