[案例]3D切割轮播图

基础HMTL结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .center {
                position: absolute;
                left:0px;
                right: 0px;
                top:0px;
                bottom: 0px;
                margin: auto;
            }
            .box{
                width: 980px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div class="box center">
        </div>
    </body>
</html>

初始化Dom结构

var itemCount = 5; // 每张图片分割的列数

function init(){
    var box = $(".box");
    // 添加4个面
    for(var i = 0; i < 4; i++){                
        var slide = $("<div class='slide'></div>").appendTo(box);

        // 将一张大图切割成itemCount块
        for(var j=0; j<itemCount; j++){
            $("<div class='item'></div>").appendTo(slide);
        }
    }
}

设置图片

.item{
    height: 100%;
    position: absolute;
}

function init(){
    var box = $(".box");

    // 添加4个面
    for(var i = 0; i < 4; i++){    // slide的索引            
        var slide = $("<div class='slide'></div>").appendTo(box);

        // 将一张大图切割成itemCount块
        for(var j=0; j<itemCount; j++){ // item的索引
            $("<div class='item'></div>")
            .width()
            .css({
                "width": 100/itemCount+"%",
                "left": (100/itemCount*j)+"px",
                "background-image": "url(img/"+i+".jpg)",
                "background-position": (100/(itemCount-1)*j)+"% 0%"
            }).appendTo(slide);
        }
    }
}

通过3D变化组成立方体

.box{
    /*...*/
    transform-style: preserve-3d;
    perspective: 3000px;
}

function init(){
    // ...

    // 添加4个面
    for(var i = 0; i < 4; i++){    // slide的索引            
        // ...
        for(var j=0; j<itemCount; j++){ // item的索引
            var degree = i*90;

            $("<div class='item'></div>")
            .css({
                // ...
                "transform": "rotateX("+degree+"deg) translateZ(250px)" // 通过3D变化组成立方体
            }).appendTo(slide);
        }
    }
}

旋转切换面

var countRotate = 0; // 旋转的次数
function rotate(){
    countRotate++;

    $(".slide").each(function(indexSlide){
        var degree = indexSlide * 90 - 90*countRotate;
        $(this).find(".item").css("transform", "rotateX("+degree+"deg) translateZ(250px)");
    });
}

旋转动画

.item{
    height: 100%;
    position: absolute;
    transition: transform .4s;
}

延迟旋转动画

function init(){
    //...

    $("<div class='item'></div>")
    .css({
        // ...
        "transition": "transform .4s "+j*0.1+"s" // 每一列使用不同的延迟
    })
}

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .center {
                position: absolute;
                left:0px;
                right: 0px;
                top:0px;
                bottom: 0px;
                margin: auto;
            }
            .box{
                width: 980px;
                height: 500px;
                position: absolute;
                transform-style: preserve-3d;
                perspective: 3000px;
                /*transform: rotateX(10deg) rotateY(10deg);*/
            }
            .item{
                height: 100%;
                position: absolute;
                transition: transform .4s;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.1.0.js" ></script>
        <script type="text/javascript">
        $(function(){
            var itemCount = 5; // 每张图片分割的列数

            // 初始化Dom结构
            function init(){
                var box = $(".box");

                // 添加4个面
                for(var i = 0; i < 4; i++){    // slide的索引            
                    var slide = $("<div class='slide'></div>").appendTo(box);

                    // 将一张大图切割成itemCount块
                    for(var j=0; j<itemCount; j++){ // item的索引
                        var degree = i*90;

                        $("<div class='item'></div>")
                        .css({
                            "width": 100/itemCount+"%",
                            "left": (100/itemCount*j)+"px",
                            "background-image": "url(img/"+i+".jpg)",
                            "background-position": (100/(itemCount-1)*j)+"% 0%"
                            "transform": "rotateX("+degree+"deg) translateZ(250px)", // 通过3D变化组成立方体
                            "transition": "transform .4s "+j*0.1+"s" // 每一列使用不同的延迟
                        }).appendTo(slide);
                    }
                }
            }

            var countRotate = 0; // 旋转的次数
            function rotate(){
                countRotate++;

                $(".slide").each(function(indexSlide){
                    var degree = indexSlide * 90 - 90*countRotate;
                    $(this).find(".item").css("transform", "rotateX("+degree+"deg) translateZ(250px)");
                });
            }

            init();
            $("body").click(rotate);

        });
        </script>
    </head>
    <body>
        <div class="box center"></div>
    </body>
</html>

results matching ""

    No results matching ""