如何用js做出正方形无限旋转的效果

JavaScript013

如何用js做出正方形无限旋转的效果,第1张

很简单啊不用js也能做出来啊!用js操作这个正方形的样式,实现旋转一圈,然后封装成一个函数,每隔多长时间调用一次。具体的旋转一周的时间与函数的调用时间可以做到无缝,这个你要自己调试了(简单的实现思路)

可以使用css3中的rotate实现

实际的旋转效果是这样:

rotate中的 60deg 表示按最原始的位置,顺时针旋转60°

w3school 里面有更详细用法,可以2D旋转、3D旋转

可以参考:网页链接

动画效果可以通过js改变rotate中传入的值来实现

如果文字一直是正着的,

首先,要旋转,对象的位置必须是能改变,所以position要设置

然后选择其实就是改变它的left和top而已,而这两个的值,是用math.sin(),和math.cos()算出来的。

如果旋转文字本身,也就是文字是斜着的,则对其设置CSS的transform属性。