jquery实现一个三维文字旋转木马动画效果代码-html代码-BFW代码库

jquery实现一个三维文字旋转木马动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现一个三维文字旋转木马动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">


    <title></title>
    <style type="text/css" media="screen">
        #item {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            top: 200px;
            left: 100px;
            position: relative;
        }
        a {
            color: #FFFFFF;
        }
        ul {
            list-style-type: none;
        }
        body {
            background-color: #111;
            color: #69c;
            font-family: Arial, "MS Trebuchet", sans-serif;
            font-weight: bold;
            font-size: 1em;
        }
    </style>
</head>
<body>
    <div id="item">
        <ul>
            <li>website</li>
            <li>jQuery</li>
            <li>JavaScript</li>
            <li>HTML</li>
            <li>PHP</li>
            <li>3D</li>
            <li>Ajax</li>
            <li>CSS</li>
            <li>Design</li>
            <li>Flash</li>
            <li>Experimental</li>
            <li>Development</li>
            <li>web</li>
            <li>Tutorial</li>
            <li>ASP</li>
        </ul>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" charset="utf-8">

        var DisplayObject3D = function() {
            return this;
        };

        DisplayObject3D.prototype._x = 0;
        DisplayObject3D.prototype._y = 0;

        //Create 3d Points
        DisplayObject3D.prototype.make3DPoint = function(x, y, z) {
            var point = {};
            point.x = x;
            point.y = y;
            point.z = z;
            return point;
        };

        //Create 2d Points
        DisplayObject3D.prototype.make2DPoint = function(x, y, depth, scaleFactor) {
            var point = {};
            point.x = x;
            point.y = y;
            point.depth = depth;
            point.scaleFactor = scaleFactor;
            return point;
        };

        DisplayObject3D.prototype.container = undefined;
        DisplayObject3D.prototype.pointsArray = [];

        DisplayObject3D.prototype.init = function (container) {

            this.container = $(container);
            this.containerId = this.container.attr("id");

            //if there isn't a ul than it creates a list of +'s
            if ($(container+":has(ul)").length === 0) {
                for (i = 0; i < this.pointsArray.length; i++) {
                    this.container.append('<b id="item'+i+'">+</b>');
                }
            }
        };

        /*
* DisplayObject3D End ----------------------------------------------
*/


        /*
* Camera3D ----------------------------------------------
*/
        var Camera3D = function () {};

        Camera3D.prototype.x = 0;
        Camera3D.prototype.y = 0;
        Camera3D.prototype.z = 500;
        Camera3D.prototype.focalLength = 1000;

        Camera3D.prototype.scaleRatio = function(item) {
            return this.focalLength/(this.focalLength + item.z - this.z);
        };

        Camera3D.prototype.init = function (x, y, z, focalLength) {
            this.x = x;
            this.y = y;
            this.z = z;
            this.focalLength = focalLength;
        };


        /*
* Camera3D End ----------------------------------------------
*/


        /*
* Object3D ----------------------------------------------
*/
        var Object3D = function (container) {
            this.container = $(container);
        };

        Object3D.prototype.objects = [];

        Object3D.prototype.addChild = function (object3D) {

            this.objects.push(object3D);

            object3D.init(this.container);

            return object3D;
        };

        /*
* Object3D End ----------------------------------------------
*/


        /*
* Scene3D ----------------------------------------------
*/

        var Scene3D = function () {};

        Scene3D.prototype.sceneItems = [];
        Scene3D.prototype.addToScene = function (object) {
            this.sceneItems.push(object);
        };

        Scene3D.prototype.Transform3DPointsTo2DPoints = function(points, axisRotations, camera) {
            var TransformedPointsArray = [];
            var sx = Math.sin(axisRotations.x);
            var cx = Math.cos(axisRotations.x);
            var .........完整代码请登录后点击上方下载按钮下载查看