这个js效果是怎么实现的,求教高手

JavaScript011

这个js效果是怎么实现的,求教高手,第1张

标签云啊

js可以做的

先建个三维坐标系

把词均匀分布到球表面

x和y直接转成二维坐标

z转成z-index和opacity

动画的每一帧旋转坐标系并重新计算每个词的坐标

其实是个数学题....

还是别自己写的好, 搜一下"标签云"吧

三维坐标系中一般用:

1、最基本笛卡尔直角坐标系(x,y,z)

2、球坐标系(r,φ,θ),r是点到原点距离,φ为从正z轴自x轴按逆时针方向转到点与原点连线在xy平面内投影所转过的角,θ为点与原点连线与z轴正向的夹角。

3、柱坐标系( r、φ、z),r,φ与球坐标系一样,z是点的纵坐标。

在三维坐标系中,Z轴的正轴方向是根据右手定则确定的。右手定则也决定三维空间中任一坐标轴的正旋转方向。要标注X、Y和Z轴的正轴方向,就将右手背对着屏幕放置,拇指即指向X轴的正方向。伸出食指和中指,如右图所示,食指指向Y轴的正方向,中指所指示的方向即是Z轴的正方向。

扩展资料:

相交于原点的两条数轴,构成了平面放射坐标系。如两条数轴上的度量单位相等,则称此放射坐标系为笛卡尔坐标系。两条数轴互相垂直的笛卡尔坐标系,称为笛卡尔直角坐标系,否则称为笛卡尔斜角坐标系。

三维笛卡尔坐标(X,Y,Z)是在三维笛卡尔坐标系下的点的表达式,其中,x,y,z分别是拥有共同的零点且彼此相互正交的x轴,y轴,z轴的坐标值。

球面坐标系由到原点的距离、方位角、仰角三个维度构成。 球面坐标(ρ,θ,φ)是球面坐标系上的点的表达式。

设P(x,y,z)为空间内一点,则点P也可用这样三个有次序的数r,φ,θ来确定,其中r为原点O与点P间的距离,θ为有向线段与z轴正向所夹的角,φ为从正z轴来看自x轴按逆时针方向转到有向线段的角,这里M为点P在xOy面上的投影。

这样的三个数r,φ,θ叫做点P的球面坐标,这里r,φ,θ的变化范围为 r∈[0,+∞), φ∈[0, 2π], θ∈[0, π] . r = 常数,即以原点为心的球面; θ= 常数,即以原点为顶点、z轴为轴的圆锥面; φ= 常数,即过z轴的半平面。 其中 x=rsinθcosφ y=rsinθsinφ z=rcosθ