jQuery文字翻转动画特效插件

这是一款jQuery文字翻转动画特效插件。该插件通过jquery动态为文字添加CSS3属性来实现文字的翻转动画效果，并提供一些配置参数和回调函数来控制文字动画的效果。

使用方法

在页面中引入html2canvas.js文件。

<script src="jquery.min.js"></script>
<script src="textyleF.min.js"></script>
                

初始化插件

$('target').textyleF();
                

CSS样式

/* 目标元素 */
opacity: 0;  
perspective: xxx; //3d effective dose
/* 翻转动画*/
transform : rotateY(xxxdeg);  //you can also use 'rotateX' together.  
(transform-origin : xxx;) //If you want.  
/* 淡入淡出动画 */
opacity: 0;
                

示例1：

target {
  opacity: 0;
  perspective : 200px;
}
target span {
  /* flip effect */
  transform : rotateY(-90deg);
  /* fade effect */
  opacity: 0;
}
                

示例2：

target {
  opacity: 0;
    perspective : 200px;
}
target span {
  /* flip effect */
  transform : rotateY(-90deg) rotateX(45deg);
  transform-origin : -50% 75%;
  /* fade effect */
  opacity: 0;
}
                

配置参数

$('target').textyleF({
  duration : 1000,
  delay : 150,
  easing : 'ease',
  callback : null
});
                

示例：

$('target').textyleF({
  duration : 2000,
  delay : 200,
  easing : 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
  callback : function(){
    $(this).css({
      color : '#fff',
      transition : '1s',
    });
    $('.desc').css('opacity',1);
  }
});
                

该jQuery文字翻转动画特效插件的github网址为：https://github.com/mycreatesite/TextyleFLIP.js