jQuery和css3简单的文字3d翻转和3d旋转动画特效

这是一款非常简单jQuery和css3文字3d翻转和3d旋转动画特效插件。更好的效果你可以查看jQuery和css3文字3d翻转动画特效插件。

你所要做的事情就是在html的头部中引入jQuery和jquery.simple-text-rotator.js以及simpletextrotator.css文件。然后将你想要翻转或旋转的文字包裹到span class=”rotate”的容器中。确保鸟包裹到<span>中的文本使用逗号（“,”）隔开。

HTML结构

注意下面的文本都使用逗号分隔开。

<span class="rotate">Simple, Customizable, Light Weight, Easy</span>
                

JAVASCRIPT

$(".rotate").textrotator({
    animation: "spin",
    separator: ",",
    speed: 2000
});
                

animation：你可以选择dissolve, flip, flipUp, flipCube, flipCubeUP, fade 和 spin动画效果。如果你不选择任何效果，那默认值为“dissolve”。这些效果组合通过CSS transform和jQuery来完成动画效果。其实要做3d翻转或3d旋转效果，CSS3是最好的选择。

flips和spins效果都是使用CSS3来完成的。对于淡入淡出效果，使用了jQuery的fadeIn和fadeOut效果。对于溶解（dissolve ）效果，这里使用的是box-shadow来制作。

在文本分割符方面，开始的时候我们决定使用逗号来分割，但是如果文本中带有逗号，那就会发生冲突，所以，最终版本分割符可以由用户来决定，如果用户不设置分割符，那么就使用逗号作为分割符。

Speed参数非常简单，它决定文本旋转或翻转的速度，单位是ms。你可以在simpletextrotator.css文件中通过改变.rotating的值来调整所有动画的速度。