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. QTextEdit 总结

    关于Qt的富文本处理, 可以参考文档:Rich Text Processing 该文档有人翻译了一下(本来我想翻译- -!), 参考Rich Text Processing富文本处理 QTextEdi ...

  2. DAG上动态规划

    很多动态规划问题都可以转化为DAG上的最长路,最短路,或路径计数问题. 硬币问题: 有N中硬币,面值分别为v1,v2,v3,……vn,每种都无穷多,给定非负整数S,可以选用多少个硬币,使他们的总和恰好 ...

  3. SSH框架整合面试题

    1. 谈谈你mvc的理解MVC是Model-View-Controler的简称.即模型-视图-控制器.MVC是一种设计模式,它强制性的把应用程序的输入.处理和输出分开.MVC中的模型.视图.控制器它们 ...

  4. Github 的一些基本操作

    1.创建一个新的repository: 先在github上创建并写好相关名字,描述.例如这样一个地址: https://github.com/test/test2.git 回到本地目录如hellowo ...

  5. UVA442 Matrix Chain Multiplication 矩阵运算量计算（栈的简单应用）

    栈的练习,如此水题竟然做了两个小时... 题意:给出矩阵大小和矩阵的运算顺序,判断能否相乘并求运算量. 我的算法很简单:比如(((((DE)F)G)H)I),遇到 (就cnt累计加一,字母入栈,遇到) ...

  6. 【约瑟夫环变形】UVa 1394 - And Then There Was One

    首先看到这题脑子里立刻跳出链表..后来继续看如家的分析说,链表法时间复杂度为O(n*k),肯定会TLE,自己才意识到果然自个儿又头脑简单了 T^T. 看如家的分析没怎么看懂,后来发现这篇自己理解起来更 ...

  7. Android中IntentService的原理及使用

    在Android开发中,我们或许会碰到这么一种业务需求,一项任务分成几个子任务,子任务按顺序先后执行,子任务全部执行完后,这项任务才算成功.那么,利用几个子线程顺序执行是可以达到这个目的的,但是每个线 ...

  8. mysql千万级测试1亿数据的分页分析测试

    本文为本人最近利用几个小时才分析总结出的原创文章,希望大家转载,但是要注明出处 http://blog.sina.com.cn/s/blog_438308750100im0e.html 有什么问题可以 ...

  9. Ehcache(2.9.x) - API Developer Guide, Using Explicit Locking

    About Explicit Locking Ehcache contains an implementation which provides for explicit locking, using ...

  10. Java Thread UncaughtExceptionHandler

    有没有发生过这样的情况,你写的工作线程莫名其妙的挂了,如果不是被你刚好看到,拿只能抓瞎了,不知道啥原因了,因为异常的时候只会把stack trace打在控制台上,不会记在你想记得错误日志里,头皮都抓破 ...