css3

参考资料：

张鑫旭： http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

Demo : Demo (建议移动端看,因为用了Zepto.js)

Demo截图：

Demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=640,user-scalable=no"/>
    <title>Document</title>
    <style>
    *{ margin:0;padding:0;}
    body,html{width:100%;height:100%; perspective:10000px;-webkit-perspective:10000px; background-color: #fff;-webkit-transition: top .5s;transition: top .5s;overflow:hidden;}
    .main{ width:100%;height:100%; margin-left:120px;transform-origin: center center; }
    .box{ position:relative;width:100%;height:100%;transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transition: transform 1s;-webkit-transition: -webkit-transform 1s;transform-origin: 200px center; -webkit-transform-origin: 200px center; }
    .box .piece{position: absolute;left:0;top:20%;width:400px;height:50%;-webkit-transition: opacity 1s, transform 1s;transition: opacity 1s, transform 1s; border:5px solid #ccc; -webkit-box-sizing: border-box; background: rgba(0,0,0,.5);transform-origin: center center;-webkit-transform-origin: center center; }
    .box .piece:nth-child(1){ background-color: red;}
    .box .piece:nth-child(2){ background-color: blue;}
    .box .piece:nth-child(3){ background-color: yellow;}
    .box .piece:nth-child(4){ background-color: pink;}
    .box .piece:nth-child(5){ background-color: purple;}
    .box .piece:nth-child(6){ background-color: black;}
    .box .piece:nth-child(7){ background-color: white;}
    .box .piece:nth-child(8){ background-color: gray;}
    .box .piece:nth-child(9){ background-color: orange;}
    .box .piece:nth-child(10){ background-color: violet;}
    </style>
<script src="zepto.min.js"></script>
<script>
$(function(){
    
    
    var $oBox = $('#box'),
        $aPieces = $oBox.find('.piece'),
        winWidth = $(window).width(),
        transform = (function(){

             var arr = [ 'transform','webkitTransform','mozTransform','oTransform','msTransform' ];
             var oDiv = document.createElement('div');

             for( var i=0,len=arr.length;i<len;i++ ){
                 
                 if( oDiv.style[ arr[i] ] != undefined ){
                     return arr[i];
                 }

             }

         })();


    for( var i=0,len=$aPieces.length;i<len;i++ ){

        var deg = 360/len*i;
        var imgWidth = $aPieces.eq(i).width()/2;
        var piecesWidth = $aPieces.eq(0).width();
        var z = imgWidth/Math.tan(360/len/ 180 * Math.PI) + piecesWidth ;
    
        $aPieces[i].style[ transform ] = " rotateY("+ deg +"deg) translateZ("+ z +"px)";
        
    }

    var num = 0;
    var oBox = document.querySelector('#box');

    $(document).swipeLeft(function(){ 

        num++;
        var left = -(360 / $aPieces.length)*num;
        oBox.style[ transform ] = 'rotateY('+left+'deg)';

        return false;

    });

    $(document).swipeRight(function(){

        num--;
        var left = -(360 / $aPieces.length)*num;
        oBox.style[ transform ] = 'rotateY('+left+'deg)';
        
        return false;

    });
    
})

</script>
</head>
<body>
    <div class="main" >
        <div class="box" id="box" >
            <div class="piece" >1</div>
            <div class="piece" >2</div>
            <div class="piece" >3</div>
            <div class="piece" >4</div>
            <div class="piece" >5</div>
            <div class="piece" >6</div>
            <div class="piece" >7</div>
            <div class="piece" >8</div>
            <div class="piece" >9</div>
            <div class="piece" >10</div>
        </div>
    </div>
</body>
</html>

View Code

后记:

其实看完这个张鑫旭的文章就应该会做了，因为我这的当时是最近看了支付宝芝麻信用里的信用猜猜那个想做的这个demo 最开始以为是围着一个点转圈做的后来想到张鑫旭文章跟着做了这个

主要还是根据Math.tan求这个z轴的距离然后就是perspective景深的设置,像向左滑动，向右滑动偷懒用了 Zepto.js 的 swipeLeft、swipeRight 事件，其实想根据这个有多少面去算这个两个面的间隔但是后来发现没什么规律所以放弃了，当然如果有好的建议谢谢告知。