简介

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

（下载附件中带DEMO）

参数：

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};

使用

1  引入 jquery.js 和 Wodry.js 文件

2.  HTML

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

3.  调用

<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>

调用参数： 

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

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

 相关链接

官网地址 ：http://www.ijquery.cn/study/demo/wodry/index-cn.html#about