zoukankan      html  css  js  c++  java
  • 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 事件,其实想根据这个有多少面去算这个 两个 面的间隔但是后来发现没什么规律所以放弃了,当然如果有好的建议谢谢告知。

  • 相关阅读:
    在像Angular2这样的SPA应用中使用Google Analytics的方法
    英语
    教你打包Java程序,jar转exe随处可跑
    [java]java字符串如何保存到数据库日期类型的列?
    获取主板序列号 cpu序列号,硬盘序列号,MAC地址
    java获取mac地址,ip地址
    java 获取硬件信息
    获取年月日 时分秒
    这是一页纸商业计划书 (Business Plan) 模板。
    javac和java命令的详解
  • 原文地址:https://www.cnblogs.com/auok/p/4704815.html
Copyright © 2011-2022 走看看