3D Flip

<!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的更多相关文章

jQuery演示10种不同的切换图片列表动画效果
经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果在线演示下载地址实例代码 <!DOCTYPE html> <html lang="en" c ...
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 ...
android 细节之旋转动画
Flip Animation for Android: 近期项目中用到了一个小动画,让物体实现一定的3D旋转效果,现记录例如以下: public class FlipAnimation extends ...
[转]Flash、Flex、AS3.0框架及类库资源收集之十全大补
原文地址:http://www.d5power.com/portal.php?mod=view&aid=27 APIs.Libs.Components1.as3ebaylibhttp://co ...
Webpack + VueJS 学习、跳坑和总结
这篇随笔会陆续地更新下去,用于汇集一些关于Webpack的初学跳坑总结还有VueJS的基础知识. Webpack部分 ① 快速建立一个Webpack-Vue项目开发环境(4.39.1-2019/08/ ...
Android ViewPager打造3D画廊
本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...
基于HTML5实现3D热图Heatmap应用
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. http://www.hightopo.c ...
使用 CSS3 动画实现的 3D 图片过渡特效
这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...
基于HTML5快速搭建3D机房设备面板
以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...

随机推荐

HDU 小明系列故事——师兄帮帮忙高速幂
小明系列故事--师兄帮帮忙 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) To ...
一文了解ConfigurationConditon接口
ConfigurationCondition 接口说明 @Conditional 和 Condition 在了解ConfigurationCondition 接口之前,先通过一个示例来了解一下@C ...
sharepoint 2013 资源管理器copy大文件到本地失败解决方法
Error 0x800700DF: The file size exceeds the limit allowed and cannot be saved 中文错误信息是:文件大小超出同意范围.不能被 ...
NUTCH2.3 hadoop2.7.1 hbase1.0.1.1 solr5.2.1部署(二）
Precondition: hadoop 2.7.1 hbase 1.0.1.1 / hbase 0.98.13 192.168.1.106 ->master 192.168.1.105 ...
ViewPager总结
https://github.com/youth5201314/banner compile 'com.youth.banner:banner:1.4.9' private void setBanne ...
memcached系列
memcached系列:http://blog.csdn.net/xingxing513234072/article/category/2462865
Facebook Gradient boosting 梯度提升 separate the positive and negative labeled points using a single line 梯度提升决策树 Gradient Boosted Decision Trees (GBDT)
https://www.quora.com/Why-do-people-use-gradient-boosted-decision-trees-to-do-feature-transform Why ...
apache 301重定向到带www的二级域名
Options +FollowSymlinks RewriteEngine on rewritecond %{http_host} ^nlike.cn [nc] rewriterule ^(.*)$ ...
Linux就该这么学--命令集合9（环境变量）
1.alias命令用于设置命令的别名:(alias 别名=命令) alias lll ="ll" 2.unalias命令用于取消命令的别名:(unalias 别名) unalias ...
reduce python 的用法
1.查看reduce 的用法在python 命令查看 import functools help(functools) help(functools.reduce) 或者 from functool ...

3D Flip

3D Flip的更多相关文章

随机推荐

热门专题