Javascript css从圆心算起的三维垂直线

var半径=200；//调整以移出和移入servicesitems
变量字段=$（'.servicesitem'），
容器=$（“#服务容器”），
宽度=容器。宽度（），
高度=容器高度（）；
var角度=0，
步长=（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’
});
角度+=步长；
});

.街区{
宽度：400px；
高度：500px；
}
.布洛克：以前{
内容：“；
宽度：3倍；
身高：100%；
显示：块；
位置：绝对位置；
左：50%；
背景图像：-webkit线性渐变（顶部，#7e348c，#7e348c，#7e348c）；
背景图像：-moz线性梯度（顶部，#7e348c，#7e348c，#7e348c）；
背景图像：-ms线性渐变（顶部，#7e348c，#7e348c，#7e348c）；
背景图像：-o-线性梯度（顶部，#7e348c，#7e348c，#7e348c）；
背景图像：线性渐变（顶部，#7e348c，#7e348c，#7e348c，#7e348c）；
}
超链接菜单{
列表样式类型：无；
左边距：0；
左侧填充：2米；；
宽度：300px；
}
ul.members-menu li a{
文字装饰：无；
}
ul.members-menu li.active{
背景：#eef；
}
ul.members-menu li：悬停{
背景：#eef；
}
#服务
{
宽度：700px；
高度：700px；
保证金：0自动；
}
.服务{
宽度：550px；
高度：550px；
边框：5px实心rgba（196、190、190、0.144）；
边界半径：70%；
变换：透视（800px）旋转（60度）；
背景：径向梯度（中心椭圆，#a6a49d 1%，#a6a49d 2%，#a6a49d 30%，#a6a49d 31%，#c4c0b5 100%）；
保证金：0自动；
}


我们的服务













var半径=200；//调整以移出和移入servicesitems
变量字段=$（'.servicesitem'），
容器=$（“#服务容器”），
宽度=容器。宽度（），
高度=容器高度（）；
var角度=0，
步长=（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’
});
角度+=步长；
});

.街区{
宽度：400px；
高度：500px；
}
.布洛克：以前{
z指数：9；
内容：“；
宽度：3倍；
左边距：20px；
身高：154%；
显示：块；
位置：绝对位置；
左：50%；
背景图像：-webkit线性渐变（顶部，#7e348c，#7e348c，#7e348c）；
背景图像：-moz线性梯度（顶部，#7e348c，#7e348c，#7e348c）；
背景图像：-ms线性渐变（顶部，#7e348c，#7e348c，#7e348c）；
背景图像：-o-线性梯度（顶部，#7e348c，#7e348c，#7e348c）；
背景图像：线性渐变（顶部，#7e348c，#7e348c，#7e348c，#7e348c）；
}
超链接菜单{
列表样式类型：无；
左边距：0；
左侧填充：2米；；
宽度：300px；
}
ul.members-menu li a{
文字装饰：无；
}
ul.members-menu li.active{
背景：#eef；
}
ul.members-menu li：悬停{
背景：#eef；
}
#服务
{
宽度：700px；
高度：700px；
保证金：0自动；
}
.服务{
宽度：550px；
高度：550px；
边框：5px实心rgba（196、190、190、0.144）；
边界半径：70%；
变换：透视（800px）旋转（60度）；
背景：径向梯度（中心椭圆，#a6a49d 1%，#a6a49d 2%，#a6a49d 30%，#a6a49d 31%，#c4c0b5 100%）；
保证金：0自动；
}


我们的服务












使用Adobe等图像工具创建图片，并在html中使用图像，这不是更容易吗？谢谢您的评论。当用户向下滚动链接时，我需要设置图标动画并旋转光盘谢谢。我想知道是否有任何方法可以将“我们的服务”标题和列表项精确地安排在直线的左侧和右侧？