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. C#_判断2个对象的值是否相等

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. STOMP协议规范--转载

    原文地址:http://simlegate.com/2013/10/17/stomp-specification-1.2/ 摘要 STOMP是一个简单的可互操作的协议, 被用于通过中间服务器在客户端之 ...

  3. 源码分析shiro认证授权流程

    1. shiro介绍 Apache Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能: 认证 - 用户身份识别,常被称为用户“登录”: 授权 - 访问控制: 密码加密 ...

  4. 嵌入式系统 Boot Loader 技术内幕

    转载:http://www.ibm.com/developerworks/cn/linux/l-btloader/index.html   1. 引言 在专用的嵌入式板子运行 GNU/Linux 系统 ...

  5. Linux内核初始化定义

    转载:http://blog.csdn.net/beatbean/article/details/8448623 1. Compile宏控制 位于include/linux/init.h /* The ...

  6. 仿UC浏览器图片加载进度条

    前几天用UC浏览器看新闻(无意中给UC打了广告),看到它的图片加载进度条,正好最近有时间,所以就自己写了一个. 效果图如下 进度条的底色和填充颜色都可以调整. 首先中间的笑脸作为一个整体,其实现代码如 ...

  7. InvocationTargetException

    在使用反射的适合,调用的方法无论抛出什么异常,都会变成InvocationTargetException,要想得到原始的异常,必须使用getTargetException()

  8. UE设置 去掉bak备份文件

    使用ue打开文件,修改保存后,会产生.bak备份文件,感觉不爽,如何去掉呢? 1:在ue菜单栏,选择“高级”按钮选项  —— “配置”选项 2:在弹出的选择框中,找到“备份”—— 勾选“不备份” 选项 ...

  9. # li鼠标移入移出，点击，变背景色，变checkbox选中状态

    移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...

  10. C#保存上传来的图片示例代码

    保存上传图片的方法有很多,在接下来的文章中为大家详细介绍下使用C#是如何做到的,感兴趣的朋友不要错过 复制代码代码如下: [HttpPost]  public string UploadImage() ...