-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. 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记（三）-- Logger

    本篇是在上一篇的基础上添加日志功能,并记录NLog在Asp.Net Core里的使用方法. 第一部分:默认Logger支持 一.project.json添加日志包引用,并在cmd窗口使用 dotnet ...

  2. java 2和java有什么区别

    Java是一种通用的,并发的,强类型的,面向对象的编程语言. JDK是Sun公司分发的免费Java开发工具包,正式名称为J2SDK(Java2 Software Develop Kit). 包括基本的 ...

  3. CentOS升级Python2.6到Python2.7并安装pip

    原文:http://ruter.sundaystart.net/2015/12/03/Update-python/ 貌似CentOS 6.X系统默认安装的Python都是2.6版本的?平时使用以及很多 ...

  4. solr 6.2.1环境搭建

    一:Solr简介 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过 ...

  5. Servlet 串联过滤器

    1. 串联Servlet过滤器的工作流程 2. 创建两个过滤器 MyFilter1和MyFilter2 1) MyFilter1 package com.example.filter; import ...

  6. 虚拟机设置成桥接模式x86_openwrt也可以上网

    一.虚拟机桥接设置 1. 2.选择 虚拟机 >>设置 三.ip设置,要在同一网段,能够分配到路由的ip地址 1.主机ip 2.虚拟机中x86_openwrt ip 四.openwrt设置 ...

  7. 编程中检查IIS7组件的安装情况

    http://learn.iis.net/page.aspx/135/discover-installed-components/说明:ASP.NET网络应用程序在IIS7上部署的时候,经常会要求预装 ...

  8. 上Google Adsense个人的一点体验

    最近我想开通一个Google Adsense帐号,因为以前注册过一个Google帐号,所以我以为两个是可以共通的,因为很久没上Google帐号,我记不太清密码了,所以我先是登录了Google,登上去了 ...

  9. 1061 Dating （20 分）

    1061 Dating (20 分) Sherlock Holmes received a note with some strange strings: Let's date! 3485djDkxh ...

  10. 1006 Sign In and Sign Out （25 分）

    1006 Sign In and Sign Out (25 分) At the beginning of every day, the first person who signs in the co ...