jQuery和css3文字3d翻转动画特效插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果非常炫酷的jQuery和css3文字翻转动画特效插件。CSS3为开发者们提供了许多非常有用的动画效果，使网页不再枯燥无味。在这个插件中，通过使用Adjector.js和css3使文字不断的做3d翻转和旋转动画，效果非常有趣。这里还有一个简单版的jQuery文字动画特效-jQuery和css3简单的文字3d翻转和3d旋转动画特效。

HTML结构

Adjector.js是十分简单的jQuery插件，你可以非常容易的集成它到你的项目中。

<h1 class=“contain”>
    <span class="adject">Im</span> 
    <span class=“adject">Robo | Geek | Cool | Lazy | Nerd</span>
</h1>

上面是第1-3个demo的html结构。

<div id="sub" class=“contain">
    <span class=“adject”>
        [ Paragraph 1 ]
                    |  
                [ Paragraph 1 ]
                    | 
                [ Paragraph 1 ]                 
            | 
                [ Paragraph 1 ]                 
            | 
                [ Paragraph 1 ]
    </span>
</div>

上面是第4个demo的html结构。

几个例子的Html结构除了将<h1>换位<div>之外没有什么不同。在第4个例子中使用<div>是为了使用CSS来渲染它。在所有的例子中，通用的class都是contain和adject。

contain：它是作为3d翻转或旋转的容器。
adject：这个class中包含的元素是被翻转或旋转的内容元素。内容默认使用过“|”符号分割，但是可以通过jQuery来改变这个分割符号。

JAVASCRIPT

<script type="text/javascript">
    $(document).ready(function(){
            $(".contain .adject").adjector({
                    arm: 0
            });
    });
</script>

上面是demo1的js文件。

<script type="text/javascript">
    $(document).ready(function(){
            $(".contain .adject").adjector({
                    arm: 0
            });
    });
</script>

上面是demo2的js文件。

<script type="text/javascript">
    $(document).ready(function(){
            $(".contain .adject").adjector({
                    sep: "|",
                    stay: 1000,
                    trans: 800,
                    arm: -150
            });
    });
</script>

上面是demo3的js文件。

上面的js文件必须在html头部引入jQuery和adjector.js 文件后踩能使用。上面的js文件将调用adjector 函数，并告诉它容器是.contain，翻转的目标是.adject，并提供input的值，如果input的值没有指定，那么插件将使用一个默认值，如demo1那样。你要确保提供了正确的.contain和.adject值。下面列出了一些可用的jQuery参数：

sep ：该参数是用于分割文本和文本块的分割符。默认值值“|”，但是你可以像demo3那样更改它。
stay ：该参数是文本在屏幕上的停留时间，单位为ms。对于单个文本，如demo1-demo3，该参数适用了较短的时间值，在demo4中的文本块，适用了3000ms的数值。
trans ：该参数是翻转或旋转的时间，单位是ms。
arm ：该参数是翻转或旋转的圆的半径如果arm设置为0，那么文本将绕圆心旋转。如果设置为整数，那么文本将从左向右旋转，如果设置为负数，那么文本将从右向左旋转。数值的大小决定它们位移的大小，你可以多试几个数值来看看效果。

CSS样式

大部分的CSS样式时根据js文件的输入值来确定样式。

/* ====================================
 * adjector.css
 * ====================================
 * Copyright 2014 Arsh Shah Dilbagi.
 * http://robo.im
 *
 * ================================= */
.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;
}

/* ======================================================
 * CSS for Demo pages only - Not required with the plugin
 * =================================================== */
#robo-wrapper {
  display: inline-block;
  width: 100%;
  text-align: center;
}
 
#robo-wrapper h1 {
  font-family: 'Raleway', sans-serif;
  font-size: 100px;
  font-weight: 900;
  text-transform: uppercase;
}
 
#robo-wrapper #option-details {
  display: inline-block;
  font-size: 18px;
  padding: 2px 7px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.08);
  font-family: monospace;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
 
.paragraph-content #heading {
  width: 400px;
  height: 70px;
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;
  font-size: 60px;
  font-weight: 900;
  text-align: center;
}
 
.paragraph-content #sub {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  font-size: 20px;
  text-align: justify;
}

上面的CSS或CSS3代码是非常简单的，相信你能看懂。主要的CSS3 transform 属性是通过jQuery文件中用户输入的值来发生作用。