-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. [Perl] 删除数组中重复元素

    写一个小程序时候,需要去除一个数组中的重复元素,搜索了一下,找到的代码主要是两种,一种是使用grep函数,一种是转换为hash表,代码分别如下: 使用grep函数代码片段:代码: my @array ...

  2. 【转】python基础-编码与解码

    [转自:https://www.cnblogs.com/OldJack/p/6658779.html] 一.什么是编码 编码是指信息从一种形式或格式转换为另一种形式或格式的过程. 在计算机中,编码,简 ...

  3. django中的FBV和CBV

    django中请求处理方式有2种:FBV 和 CBV 一.FBV FBV(function base views) 就是在视图里使用函数处理请求. 看代码: urls.py from django.c ...

  4. 用pthon来写个跳板机

    用pthon来写个跳板机   1.需求 程序一:1.后台管理- 堡垒机上创建用户和密码(堡垒机root封装的类,UserProfile表)- .bashrc /usr/bin/python3 /dat ...

  5. ansible copy file

    ansible xxxip  -m copy -a 'src=/localdir/file  dest=/sss/xxx/basic_search/bin/'

  6. nginx 各参数说明

    nginx 各参数说明: 参数 所在上下文 含义

  7. Grid中添加链接,打开选项卡页面

    如何在grid中点击,添加一个选项卡并打开页面        function addeditnew(id, title)         {                     var node ...

  8. 【python】python GUI开发框架介绍

    Python GUI开发的库不少.最常用的的也就几个. Tkinter -Tk是Python自带的GUI库, 上手简单, 做个简单界面基本够用了,但是不够美观,功能不全面. wxPython -开源免 ...

  9. 用7z.exe 压缩整个文件夹里的内容

    以下是批处理中的内容: 7z.exe a -tzip zmv9netSrc.zip "D:\IE收藏夹备份\*"pause7z.exe a -tzip zmv9netSrc.zip ...

  10. bzoj3326: [Scoi2013]数数

    Description Fish 是一条生活在海里的鱼,有一天他很无聊,就开始数数玩. 他数数玩的具体规则是: 1. 确定数数的进制B 2. 确定一个数数的区间[L, R] 3. 对于[L, R] 间 ...