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. TortoiseGit安装教程

    TortoiseGit 是Windows下的可视化Git界面. 下载Git 网站地址: http://code.google.com/p/tortoisegit/ 安装前必须装上msysgit才能在W ...

  2. 替换运算符 shell

        ${变量:-word}如果变量存在且非空,则返回其值:否则返回word                  用于:如果变量未定义,则返回默认值即word      ${变量:+word}如果变量 ...

  3. qt widget设置Qt::FramelessWindowHint和Qt::WA_TranslucentBackground, 会出现一个bug: 在最小化后还原时界面停止刷新

    qt widget设置Qt::FramelessWindowHint和Qt::WA_TranslucentBackground, 会出现一个bug: 在最小化后还原时界面停止刷新 Widget wit ...

  4. CASS转ARCGIS

    本文转载千浪兄弟博客 1.先看看这张图:CASS的扩展属性 ("south" (1000 . "310000")) 对应图斑属性编码“310000”,(&quo ...

  5. signed char、unsigned char

    什么是无符号char类型?与常见的char类型有何不同? 在c++中有三种不同的字符类型:char,signed char,unsigned char.如果要应用与文本字符,就使用不加限制的char类 ...

  6. 包加载失败 未能正确加载包“xxx”...

    打开vs2008或者2005如果弹出一个警告对话框 包加载失败 未能正确加载包“xxx” ...... 的字样,就可以用以下方法解决. 在cmd下运行带参数的devenv.exe: "d(盘 ...

  7. MPMoviePlayerController过期导致视频播放时间条颠倒及AVPlayerViewController的用法

    MPMoviePlayerController虽然好用 但是过期了 所以可能会导致一些莫名的问题  ,比如说下面时间条的问题 但我们可以使用AVPlayerViewController来实现相应的想过 ...

  8. php实现MVC

    在PHP中使用MVC越来越流行了,特别是在一些开源的框架当中.MVC足以应对大多数的情况,但还有一些情况是其不太适合的,如比较简单的个人博客,对于只有几百篇文章量级的博客,使用MVC让人觉得有些太复杂 ...

  9. applicationContext-mail.xml 模板

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  10. SVN更改用户名和密码

    关于SVN更换用户名和密码的问题,SVN是一个脚本的扩展软件,但是通过客户端更改用户名和密码的时候比较弱智,必须要经过一些操作之后才能出现更改用户名和密码的对话框. 主要的步骤就是“点击鼠标右键选择T ...