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

 查看演示  website  立即下载

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

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

jquery.js cdn:  

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

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

<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-核心浏览器

PREVIOUS:
NEXT:
前端图片压缩
jQuery图片合成插件