第95款插件：wodry.js是一个简单的文本翻转/文本旋转插件

一、插件介绍

Wodry.js 是一个简单的文本翻转/文本旋转jQuery插件。 Wodry.js有一些参数设置，允许你设置动画，如文本翻转和文本旋转，可以设置自己的回调内容翻转等。

二、插件图片示例

三、插件作者下载地址

作者：Sergey Golovin 
作者邮箱： golovim@gmail.com
插件下载地址： http://www.ijquery.cn/js/wodry.js
官网文档： http://www.ijquery.cn/study/demo/wodry/index-en.html
官网文档本地翻译： http://www.ijquery.cn/study/demo/wodry/index-cn.html

三、插件参数

separator: 在翻转的文本中设置分割 默认: '|';
delay: 设置延迟的作用 默认: 2000;
animationDuration: 设置动画持续时间 默认: 500;
animation: 设置动画的类型 默认: 'rotateY'，参数有动画列表: rotateX, rotateY, rotateAll, scaleX, scaleY, scaleAll, clockwise, anticlockwise;
callback: 设置一个回调，要求每次迭代。 默认: 空;
shift: 指定X，Y和Z值的变化。 默认: {x:0,y:0,z:0};

四、使用教程

JS代码和CSS代码：

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/wodry/wodry.min.js"></script>
<style type="text/css">
	.adjecting {
	display: inline-block;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin-x: 50%;
	}
	.adjecting .front-face, .adjecting .back-face {
	display: inline-block;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	}
	.adjecting .front-face {
	position: absolute;
	}
	.adjecting .back-face {
	position: relative;
	}
</style>

HTML代码：

<div class="wodry">一款简单的插件|一款内容的翻转的插件|一款写在 CoffeeScript 里的插件</div>

调用参数：

$('.wodry').wodry({
	animation: 'rotateAll',
	delay: 1000
});

当然把 animation 换成  rotateX, rotateY, rotateAll, scaleX, scaleY, scaleAll, clockwise, anticlockwise  就可以看到所有的效果！