-webkit-transform-style:-webkit-preserve-3d;//设置3D转换

translateX:px; 平移

translateY:px;

translateZ:px;

rotateX:deg; 旋转

rotateY:deg;

rotateZ:deg;

transform-origin://旋转中心

X轴    left   center    right

Y轴    top   center    bottom

Z轴    length px

三维属性

-webkit-perspective:;  表示Z轴距离，浏览器距离3D物体的距离

-webkit-perspective-origin:% %;表示浏览器正中心看过去
<style type="text/css">

            *{margin:0px;padding:0px;}

            ul{list-style:none;}

            #test{

                margin-top: 100px;

                -webkit-perspective:;

                perspective:;

                -webkit-perspective-origin: % %;

                perspective-origin: % %;

                overflow: hidden;

            }

            .block{

                position:relative;

                height:300px;

                width: 300px;

                margin:0px auto;

                -webkit-transform-style: preserve-3d;/* 设置其子元素的3D属性*/

                transform-style: preserve-3d;

            }

            .block li{

                height:%;

                width:%;

                background-color: #;

                color:#FFF;

                position:absolute;

                line-height:%;

                font-size:300px;

                text-align:center;

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

                transition:transform 1s linear;

                -webkit-transform-origin:bottom;

                transform-origin:bottom;

            }

            #test2,#test3,#test4,#test5,#test6{

                -webkit-transform: rotateX(90deg);

                transform: rotateX(90deg);

            }

        </style>

    </head>

    <body>

        <!--创建3D场景-->

        <div id="test">

            <!--内容-->

            <ul class="block">

                <li id='test1'></li>

                <li id='test2'></li>

                <li id='test3'></li>

                <li id='test4'></li>

                <li id='test5'></li>

                <li id='test6'></li>

            </ul>

        </div>

        <div class="btn" style="width:300px;margin:0 auto;text-align:center;">

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

        </div>

    </body>

    <script type="text/javascript">

        var clearIndex = ;

        function next(){

            if(clearIndex==){

                return;

            }

            var currentIndex = document.getElementById('test'+clearIndex);

            currentIndex.style.transform = 'rotateX(-90deg)';

            currentIndex.style.webkitTransform = 'rotateX(-90deg)';

            clearIndex++;

            var nextIndex = document.getElementById('test'+clearIndex);

            nextIndex.style.transform = 'rotateX(0deg)';

            nextIndex.style.webkitTransform = 'rotateX(0deg)';

        }

        function prev(){

            if(clearIndex==){

                return;

            }

            var currentIndex = document.getElementById('test'+clearIndex);

            currentIndex.style.transform = 'rotateX(90deg)';

            currentIndex.style.webkitTransform = 'rotateX(90deg)';

            clearIndex--;

            var prevIndex = document.getElementById('test'+clearIndex);

            prevIndex.style.transform = 'rotateX(0deg)';

            prevIndex.style.webkitTransform = 'rotateX(0deg)';

        }

    </script>

3D翻页效果

CSS3d 基础的更多相关文章

  1. Bootstrap中的less基础

    在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有 ...

  2. css 3d 基础知识

    css3d 总结 3d transform (3D变形)(rotate skew scale translate) 基础知识 perspective (视距,景深) perspective-origi ...

  3. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  4. node-webkit 环境搭建与基础demo

    首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...

  5. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Golang， 以17个简短代码片段，切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  7. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  8. HTTPS 互联网世界的安全基础

    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

  9. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

随机推荐

  1. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 auto-focus

    转载至:https://blog.csdn.net/wo541075754/article/details/75349556 auto-focus 在agenda-group章节,我们知道想要让Age ...

  2. PostgREST docker-compose 试用

    PostgREST 是一款很不错的直接将pg 数据库暴露为restapi ,使用了基于行级别安全访问控制, 比较全的restapi 查询以及集成了swagger openapi docker-comp ...

  3. 破解UltraEdit（Ver20.00.0.1040），无限试用

    因为是第一次破解较大型的商业软件,所以有必要记录一下,另外UE的价格也实在太贵了... 第零步:准备 准备好破解常用软件.我常用的工具有IDA(用于静态分析).Ollydbg(动态调试).PEiD(用 ...

  4. 捷报 FastAdmin 国内开源排名第 13 名

    捷报 FastAdmin 国内开源排名第 13 名 FastAdmin 是一款基于 ThinkPHP 5 + Bootstrap 的后台开源框架. 去年是第 35 名. 今年是第 13 名,有进步.

  5. Oracle 11gR2 rac 的各项服务说明

       安装结束后,会产生一些后台进程来确保集群正常工作并能够与外部通讯.其中的一些有序linux平台的要求需要以root用户权限来启动.比如,网络配置的改动就需要更高的权限.其他后台进程将以grid软 ...

  6. python3 获取int最大值

    python2 中获取int最大值 import sys i = sys.maxint print i 但是在python3中,报错: AttributeError: module 'sys' has ...

  7. Linux 下V4l2摄像头采集图片，实现yuyv转RGB,RGB转BMP，RGB伸缩，jpeglib 库实现压缩RGB到内存中，JPEG经UDP发送功(转)

    ./configure CC=arm-linux-gnueabihf-gcc LD=arm-linux-gnueabihf-ld --host=arm-linux --prefix=/usr/loca ...

  8. gitlab配合walle搭建发布系统

    理解walle实现发布代码的原理: ​ 宿主机:walle系统搭建的服务器以及拉取gitlab代码的服务器,这个时候gitlab一般都是另外一台服务器. 目标机器:版本最终发布的目的机器,或者目的机群 ...

  9. WF4.0 基础篇 (一)开始使用WF

    来源:https://www.cnblogs.com/caosenianhuan/p/WF.html 最近公司要重新上线一套新的CRM系统,要重整老系统里的业务流模块,团队讨论已微软的workflow ...

  10. java 解析pdm文档

    前面展示了pdm 的xml结构,既然知道了结构,用java来解析也不会太难,这就为代码自动生成奠定了基础 package com.core.reader.pdmreader.imp; import j ...