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. Android基本控件之GridView

    我们在使用手机的过程中,会看到一些图片配上文字的一些情况,今天我们就来介绍一下安卓控件的GridView GridView组件用来以网格方式排列视图,与矩阵类似,当屏幕上有很多元素(文字.图片或其他元 ...

  2. DataBase 之 表操作

    1:向表中添加字段 Alter table [表名] add [列名] 类型 2: 删除字段 Alter table [表名] drop column [列名] 3: 修改表中字段类型 (可以修改列的 ...

  3. Mybatis的简单示例

    首先新建一个JavaWeb项目并导入mybatis依赖的jar包,同时Mybatis是对数据库的操作所以我们需要在数据库中新建一个表user用来演示. 新建完表之后我们还需要建立相对应的实体类User ...

  4. http协议Authorization认证方式在Android开发中的使用

    我们都知道,http协议是一种无状态协议,在Web开发中,由于Session和Cookie的使用,使得服务端可以知道客户端的连接状态,即用户只需要在浏览器上登录一次,只要浏览器没有关闭,后续所有的请求 ...

  5. Direct3D11-1 初始化

        在使用一个东西之前,我们需要初始化他,好比汽车加油,手机充电.于是我们采取平时的编码习惯,试图写下如下代码         Direct3D11 _direct3d11;     事实上,我们 ...

  6. css3 一些属性

    ==text-shadow== 语法:text-shadow: x-offset y-offset blur-radius color text-shadow:X 轴偏移量 Y轴偏移量 模糊半径 阴影 ...

  7. javascript oop深入学习笔记（二）--javascript的函数

    一.概述: 函数是进行模块化程序设计的基础, javascript重的的函数不同于其他语言,每个函数都作为一个对象被维护和运行.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或则讲函数作为参 ...

  8. ArcGIS动态文本

    处理动态文本 来自:http://resources.arcgis.com/zh-cn/help/main/10.2/index.html#/na/00s900000013000000/ Deskto ...

  9. LeetCode 238

    Product of Array Except Self Given an array of n integers where n > 1, nums, return an array outp ...

  10. poj 3648 2-SAT问题

    思路:将每对夫妻看成是对立状态,每个不正常关系都是一个矛盾,按2-SAT的方式建边.最后建一条新娘到新郎的边.具体看注释 #include<iostream> #include<cs ...