jquery+css3立方体自定义生成（原创）

查看演示立即下载

插件描述：jq+css3矩体自定义生成，可自定义宽高和面的分离量

欢迎使用矩体自定义生成插件

在使用之前，您需要了解，该插件是基于jquery制作的，您需要引入最新版jquery.js

jquery.js cdn:

1	`<script` `src="/"></script>`

引入jquery.js之后，就可以引入插件文件

1	`<script` `src="js/cube.js"` `type="text/javascript"` `charset="utf-8"></script>`

插件引入之后，您需要添加矩体的基本框架（html部分）

<div>
    <div class="">
        1
    </div>
    <div class="">
        2
    </div>
    <div class="">
        3
    </div>
    <div class="">
        4
    </div>
    <div class="">
        5
    </div>
    <div class="">
        6
    </div>
</div>

css部分：

.cube {
    /*必须设置,宽高可自定义*/
    width: 500 px;
    height: 500 px;
    /*必须设置,可选择position: relative或position: absolute;*/
    position: relative;
    /*测试用动画,默认关闭*/
    /*animation: zz 20s infinite linear;*/
    /*可选:自定义样式区开始*/
    margin: 0 auto;
    margin - top: 500 px;
    /*可选:自定义样式区结束*/
}
/*测试用动画,默认关闭*/
@ - webkit - keyframes zz {
        from {
            transform: rotateX(0 deg) rotateY(0 deg) rotateZ(0 deg);
        }
        to {
            transform: rotateX(-360 deg) rotateY(-360 deg) rotateZ(-360 deg);
        }
    }
    .cube > div {
        /*不可编辑区开始*/
        width: 100 % ;
        height: 100 % ;
        position: absolute;
        /*不可编辑区结束*/
        /*可选:自定义样式区开始*/
        background - color: rgba(0, 0, 0, 0.9);
        display: flex;
        justify - content: center;
        align - items: center;
        font - size: 80 px;
        color: white;
        /*可选:自定义样式区结束*/
    }

注意，矩体的宽高需要设置在cube上，这是矩体的主框架，可以自定义类名

最后，添加插件启动代码

//矩体翻转index,可用cube_index=1的方式直接赋值，index最大值为6，最小值为1
var cube_index = 1;
//组件调用方法:cube("矩体主样式名",矩体各面分离量, 矩体翻转切换index值);
cube("cube", 10, cube_index);

好了，现在您拥有了一个自定义的矩体，矩体的大小取决于您对cube宽高的设置，矩体的每个面的内容和背景色您都可以自行设置，可兼容-webkit-核心浏览器

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery图片合成插件
下一个特效：前端图片压缩