<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style id="css">

    *{

        margin: 0;

        padding: 0;

    }

    li{

        list-style-type: none;

    }

    .wrap{

        width: 500px;

        height: 300px;

        margin: 50px auto;

        box-shadow: 0 0 120px #333;

        position: relative;

    }

    /*..................li style.................*/

    .piclist{

        width: 100%;

        height: 300px;    /*caution*/

        -webkit-perspective:800px;    /*景深*/

        overflow: hidden;

    }

    .piclist li{

        height: 300px;

        position: relative;

        float: left;

        -webkit-transform-style:preserve-3d;

        -webkit-transform-origin:center center -150px; /*注意-150px*/

    }

    .piclist li a{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

    }

    .piclist li a:nth-of-type(1){

        background: url(a.jpg) no-repeat;

    }

    .piclist li a:nth-of-type(2){

        background: url(b.jpg) no-repeat;

        top: -300px;

        -webkit-transform-origin:bottom;

        -webkit-transform:rotateX(90deg);

        /*-webkit-transform-origin:top;

        -webkit-transform:rotateX(-90deg);*/

    }

    .piclist li a:nth-of-type(3){

        background: url(c.jpg) no-repeat;

        -webkit-transform:translateZ(-300px) rotateX(180deg);    /*翻转过来*/

    }

    .piclist li a:nth-of-type(4){

        background: url(d.jpg) no-repeat;

        top: 300px;

        -webkit-transform-origin:top;

        -webkit-transform:rotateX(-90deg);

        /*-webkit-transform-origin:bottom;

        -webkit-transform:rotateX(90deg);*/

    }

    .piclist li span{

        background-color: #333;

        position: absolute;

        top: 0;

        width: 300px; /*注意这里大小和a的大小是不一样的喔*/

        height: 300px;

    }

    .piclist li span:nth-of-type(1){

        left: 0;    /*靠左*/

        -webkit-transform-origin:left;

        -webkit-transform:rotateY(90deg);

    }

    .piclist li span:nth-of-type(2){

        right: 0;    /*靠右*/

        -webkit-transform-origin:right;

        -webkit-transform:rotateY(-90deg);

    }

    /*......................btn sytle............*/

    .btnlist{

        position: absolute;

        right: 0;

        bottom: -50px;

    }

    .btnlist li{

        float: left;

        width: 30px;

        height: 30px;

        text-align: center;

        background-color: gray;

        margin-right: 10px;

        border-radius: 50%;

        font: italic 16px/30px "Arial";

        cursor: pointer;

        color: #fff;

        -webkit-user-select:none;

    }

    .btnlist .active{

        background-color: orange;

    }

    </style>

</head>

<body>

    <div class="wrap">

        <ul class="piclist" id="piclist">

            <!-- <li>

                <a href="javascript:;"></a>

                <a href="javascript:;"></a>

                <a href="javascript:;"></a>

                <a href="javascript:;"></a>

                <span></span>

                <span></span>

            </li> -->

        </ul>

        <ol class="btnlist" id="btnlist">

            <li class="active">1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ol>

    </div>

    <script>

    var oPic=document.getElementById("piclist");

    var aPicList=oPic.getElementsByTagName("li");

    var oBtn=document.getElementById("btnlist");

    var aBtnLi=oBtn.getElementsByTagName("li");

    var oCss=document.getElementById("css");

    var sCss="";

    var oneW=100;    //调整此li宽度或间隔时间来调整效果

    var iNum=parseInt(oPic.clientWidth/oneW);

    var iZindex=0;

    var sPic="";

    var arrZ=[];

    for(var i=0;i<iNum;i++){

        i>iNum/2?iZindex--:iZindex++;

        arrZ.push(iZindex);

        sPic+='<li><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><span></span><span></span></li>';

        sCss+=".piclist li:nth-of-type("+(i+1)+"){z-index:"+iZindex+";}";    //z-index:iZindex(X)凡是(只有)变量都是"+var+"，此地外层用双引号

        sCss+=".piclist li:nth-of-type("+(i+1)+") a{background-position:-"+oneW*i+"px 0;}";

    }

    oPic.innerHTML=sPic;

    oCss.innerHTML+=sCss;

    //或者这样加z-index

    // for(var i=0;i<iNum;i++){

    //     aPicList[i].style.zIndex=arrZ[i];  //一定要在oPic.innerHTML=sPic;后设置z-index

    // }

    for(var i=0;i<aPicList.length;i++){

        aPicList[i].style.width=oneW+"px";

    }

    var iNow=0;

    for(var i=0;i<aBtnLi.length;i++){

        (function(index){

            aBtnLi[index].onclick=function(){

                for(var i=0;i<aPicList.length;i++){

                    aPicList[i].style.WebkitTransition=".5s "+i*100+"ms";

                    aPicList[i].style.WebkitTransform="rotateX(-"+(index*90)+"deg)";    //index*90

                }

                //console.log(index);

                aBtnLi[iNow].className="";

                aBtnLi[index].className="active";    //注意这里aBtnLi[index]

                iNow=index;

            };

        })(i);

    }

    </script>

</body>

</html>

3D Flip的更多相关文章

  1. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

  2. jQuery演示10种不同的切换图片列表动画效果以及tab动画演示 2

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  3. android 细节之 旋转动画

    Flip Animation for Android: 近期项目中用到了一个小动画,让物体实现一定的3D旋转效果,现记录例如以下: public class FlipAnimation extends ...

  4. [转]Flash、Flex、AS3.0框架及类库资源收集之十全大补

    原文地址:http://www.d5power.com/portal.php?mod=view&aid=27 APIs.Libs.Components1.as3ebaylibhttp://co ...

  5. Webpack + VueJS 学习、跳坑和总结

    这篇随笔会陆续地更新下去,用于汇集一些关于Webpack的初学跳坑总结还有VueJS的基础知识. Webpack部分 ① 快速建立一个Webpack-Vue项目开发环境(4.39.1-2019/08/ ...

  6. Android ViewPager打造3D画廊

    本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...

  7. 基于HTML5实现3D热图Heatmap应用

    Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. http://www.hightopo.c ...

  8. 使用 CSS3 动画实现的 3D 图片过渡特效

    这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...

  9. 基于HTML5快速搭建3D机房设备面板

    以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...

随机推荐

  1. hint指定index的深入理解

    http://czmmiao.iteye.com/blog/1480247创建一个表,含有位图index和b-tree index SQL> create table t as select o ...

  2. winform 下载文件显示进度和百分比

    /// <summary> /// 下载完成 /// </summary> private void DownloadFileCompleted() { IsComlate = ...

  3. java.lang.UnsupportedClassVersionError: Unsupported major.minor version 49.0的错误 [转]

    一:要解决的问题 我们在尝鲜 JDK1.5 的时候,相信不少人遇到过 Unsupported major.minor version 49.0 错误,当时定会茫然不知所措.因为刚开始那会儿,网上与此相 ...

  4. Android 开源项目精选

    0x00  leakcanary [内存泄漏检测] Leakcanary : A memory leak detection library for Android and Java. 良心企业Squ ...

  5. 下一代Apache Hadoop MapReduce框架的架构

    背景 随着集群规模和负载增加,MapReduce JobTracker在内存消耗,线程模型和扩展性/可靠性/性能方面暴露出了缺点,为此需要对它进行大整修. 需求 当我们对Hadoop MapReduc ...

  6. iOS打包（ipa包）

    1.打开XCode打开project文件.选择Product,再点击Archive. 2.鼠标右键点击Shoe In Finder 3.鼠标右键选择"显示包内容" 4.鼠标左键双击 ...

  7. 史上最浅显易懂的Git教程3 分支管理

    假设你准备开发一个新功能,但是需要两周才能完成,第一周你写了50%的代码,如果立刻提交,由于代码还没写完,不完整的代码库会导致别人不能干活了.如果等代码全部写完再一次提交,又存在丢失每天进度的巨大风险 ...

  8. ant 可自动替换友盟渠道、版本号、包名

    可自动替换友盟渠道.版本号.包名 如何集成到我的项目里 前提:了解android官方文档,在项目目录中执行ant debug能打包,比如常见的打包步骤: android update project ...

  9. 【BZOJ2151】种树 双向链表+堆（模拟费用流）

    [BZOJ2151]种树 Description A城市有一个巨大的圆形广场,为了绿化环境和净化空气,市政府决定沿圆形广场外圈种一圈树.园林部门得到指令后,初步规划出n个种树的位置,顺时针编号1到n. ...

  10. poj 2151Check the difficulty of problems<概率DP>

    链接:http://poj.org/problem?id=2151 题意:一场比赛有 T 支队伍,共 M 道题, 给出每支队伍能解出各题的概率~  求 :冠军至少做出 N 题且每队至少做出一题的概率~ ...