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技术上完成设备面板的搭建. 我们今天模拟 ...

随机推荐

聊聊高并发（三十九）解析java.util.concurrent各个组件（十五）理解ExecutorService接口的设计
上一篇讲了Executor接口的设计,目的是将任务的运行和任务的提交解耦.能够隐藏任务的运行策略.这篇说说ExecutorService接口.它扩展了Executor接口,对Executor的生命周期 ...
oracle中视图V$PGA_TARGET_ADVICE的用法
看一下这个视图能给我们带来什么样的信息(视图中每个列都很有帮助):sys@ora10g> SELECT pga_target_for_estimate / 1024 / 1024 " ...
现在有一个城市销售经理，需要从公司出发，去拜访市内的商家，已知他的位置以及商家的位置，但是由于城市道路交通的原因，他只能在左右中选择一个方向，在上下中选择一个方向，现在问他有多少种方案到达商家地址。给定一个地图map及它的长宽n和m，其中1代表经理位置，2代表商家位置，-1代表不能经过的地区，0代表可以经过的地区，请返回方案数，保证一定存在合法路径。保证矩阵的长宽都小于等于10。
include "stdafx.h" #include<iostream> #include<vector> #include<algorithm&g ...
2_Jsp标签_传统标签功能简介
1传统标签接口关系: 2功能简介 ...
Option可选值可选值（二）
//: Playground - noun: a place where people can play import Cocoa var str1 = "供选链接和强制拆包的不同. &qu ...
iOS 10 的杂碎资料
兼容iOS 10 资料整理笔记 1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大 ...
“volatile”这个关键字
我们经常使用“volatile”这个关键字,它是什么意思? 解析:volatile问题.当一个对象的值可能会在编译器的控制或监测之外被改变时,例如一个被系统时钟更新的变量,那么该对象应该声明成vola ...
python 基础 9.0 安装MySQL-python-1.2.5客户端
一. 安装客户端 python 标准数据库接口为Python DB-API,Python DB-API 为开发人员提供了数据应用编程接口.参考地址:https://wiki.python.or ...
网卡配置bond
在实际的生产环境中,服务器都需要配置bond环境的,以提高安全性及均衡能力.我公司网卡配置的是mode=1 类型,mode=1 是主备模式,当其中一块网卡不能工作时,另一块网卡立即代替.以下是mode ...
继续封装DBDA.php 加入ajax
<?php class DBDA { public $host = "localhost"; //服务器地址 public $uid = "root"; ...

3D Flip

3D Flip的更多相关文章

随机推荐

热门专题