1、先上图~~~

2、代码

html部分

 <body>

     <div id="my3d">

         <div id="box">

             <div id="li1" class="li">1</div>

             <div id="li2" class="li">2</div>

             <div id="li3" class="li">3</div>

             <div id="li4" class="li">4</div>

             <div id="li5" class="li">5</div>

             <div id="li6" class="li">6</div>

         </div>

     </div>

     <div class="btns">

         <a href="javascript:prev();" id="prev">prev</a>

         <a href="javascript:next()" id="next">next</a>

     </div>

 </body>

css部分

#my3d{

        -webkit-perspective:;

        -webkit-perspective-origin: 50% 50%;

        overflow: hidden;

    }

    #box{

        width: 400px;

        height: 400px;

        margin: 0 auto;

        position: relative;

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

    }

    .li{

        width: 400px;

        height: 400px;

        line-height: 400px;

        text-align: center;

        font-size: 300px;

        color: #fff;

        background: #000;

        position: absolute;

        -webkit-transform-origin: bottom;

        -webkit-transform: rotateX(90deg);

        -webkit-transition: -webkit-transform 1s linear;

    }

    .li:first-child{

        -webkit-transform: rotateX(0deg);

    }

    .btns{

        text-align: center;

    }

js部分

var index = 1;

function prev(){

    if (index==1) {

        return false;

    };

    var cur = document.getElementById('li'+index);

    cur.style.webkitTransform="rotateX(90deg)";

    index--;

    var prev = document.getElementById('li'+index);

    prev.style.webkitTransform="rotateX(0deg)";

}

function next(){

    if (index==6) {

        return false;

    };

    var cur = document.getElementById('li'+index);

    cur.style.webkitTransform="rotateX(-90deg)";

    index++;

    var next = document.getElementById('li'+index);

    next.style.webkitTransform="rotateX(0deg)";

}

源码下载

简单3D翻转的更多相关文章

  1. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  2. 【译】仿Taasky的3D翻转菜单动画实现

    最终效果 最终效果 开始 首先下载并打开一个事先搭好架子的Demo,然后来分析一下.这个Demo包含一个主页和详情页,其中MenuViewController继承自UITableViewControl ...

  3. CSS3—3D翻转

    本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...

  4. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

  5. CSS3——3D翻转相册

    transform属性和transition过渡属性,结合jQuery代码实现翻转功能. <!DOCTYPE html> <html lang="en"> ...

  6. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  7. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  8. 两个activity的3D翻转动画.md

    一.业务需求 这里在公司项目设计时,用到了一个小的需求,就是点击一个按钮然后整个activity的页面进行3d翻转; 二.设计思路 由于是2个activity的之间的翻转动画,就意味着前90度是A页面 ...

  9. 基于html5顶部导航3D翻转展开特效

    基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header cla ...

随机推荐

  1. JS_CSS_logon_Mask

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. windows系统中eclipse C c++开发环境的搭建

    搜索了网上各种版本的eclipse c,c++ ,头都晕了..以前的版本很多都失效了..下面这个是搞了两天才调通的.超级强大,推荐 1.先装MinGW 2.配置环境变量3.然后把安装目录\mingw\ ...

  3. java中关于json传图片的方法

    一般来说传图片可以以流的形式来传输,即便是用json传输,一般也都是传一个地址,而图片都存在服务器上,然后顺着地址发送请求下载图片. 但是这次公司的项目中,图片是存在oracle数据库中的blob字段 ...

  4. ISO8583报文解析

    在此只写了一个8583报文的拆包,组包其实也差不多的. 不多说直接上文件, 具体思路过程,在解析类里面写的有. 其中包含了四个文件 8583resp.txt报文 ISO8583medata配置文件 B ...

  5. Python Thread

    lock 对象: acquire():负责取得一个锁.如果没有线程正持有锁,acquire方法会立刻得到锁.否则,它闲意态等锁被释放. 一旦acquire()返回,调用它的线程就持有锁. releas ...

  6. Oracle开发专题之：%TYPE 和 %ROWTYPE

    1. 使用%TYPE 在许多情况下,PL/SQL变量可以用来存储在数据库表中的数据.在这种情况下,变量应该拥有与表列相同的类型.例如,students表的first_name列的类型为VARCHAR2 ...

  7. [改善Java代码]用枚举实现工厂方法模式更简洁

    工厂方法模式(Factory Method Patter)是"创建对象的接口",让子类决定实例化哪一个类,并使一个类的实例化延迟到其子类.工厂方法模式在我们的开发工作中,经常会用到 ...

  8. 关于hadoop2.4.1伪分布式系统的搭建

    1.准备Linux环境 1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ip ...

  9. Angular2 从0到1 （一）

    史上最简单Angular2教程,大叔都学会了 作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:An ...

  10. 浅谈MapControl控件和PageLayoutControl控件

    1.MapControl控件是ArcObject(ArcEngine)中使用非常普遍的一个控件,它对应ArcMap中的DataView视图.MapControl控件实现的功能: 1)管理控件的外观.显 ...