CSS3d 基础
-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>
CSS3d 基础的更多相关文章
- Bootstrap中的less基础
在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less 一般都有 ...
- css 3d 基础知识
css3d 总结 3d transform (3D变形)(rotate skew scale translate) 基础知识 perspective (视距,景深) perspective-origi ...
- java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
- node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Golang， 以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
- Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
随机推荐
- test20180922 倾斜的线
题意 问题描述 给定两个正整数P和Q.在二维平面上有n个整点.现在请你找到一对点使得经过它们的直线的斜率在数值上最接近P/Q(即这条直线的斜率与P/Q的差最小),请输出经过它们直线的斜率p/q.如果有 ...
- ory Oathkeeper Ecosystem
ory Oathkeeper 生态包含的组件 ORY Hydra is an OAuth 2.0 and OpenID Connect provider. ORY Oathkeeper is an I ...
- streamsets 集成 minio s3测试
具体streamsets crate 集成可以参考 streamsets crate 以下文档只关注minio 集成的配置 minio 服务 搭建 具体搭建参考: https://www.cnblog ...
- 脸部识别JavaScript类库Tracking.js
作者 王文刚 发布于 2014年8月10日 | 对Web开发者而言,开源的JavaScript库Tracking.js正在使计算机视觉和增强现实技术变得简单, 使用它可以展示效果类似Kinect或 ...
- linux 静态库文件
1.生成目标文件 gcc -o mylib.o -c mylib.c 2.生成静态库文件 ar rcs libmylib.a mylib.o 查看库信息: nm libmylib.a //====== ...
- BASIC-18_蓝桥杯_矩形面积交
解题思路: 1.先将可能的情况列出,根据分类确定计算的方式; 示例代码: #include <stdio.h>#define N 8 int main(void){ int i = 0 , ...
- Excel数组排序+图片统一大小
Sub 图片调整合适大小() ' Debug.Print ActiveWorkbook.Name 图片显示比例 = 0.9 '1为顶满单元格 Dim wb As Workbook, sh As Wor ...
- 从Tomcat无法正常关闭讲讲Java线程关闭问题【转载】
正常情况下,会优先采用catalina.sh stop来停止Tomcat实例,这样可以让服务有机会处理完请求,并做好善后工作. 但如果通过catalina.sh stop命令无法关闭Tomcat实例, ...
- 1041 Be Unique （20 分）
1041 Be Unique (20 分) Being unique is so important to people on Mars that even their lottery is desi ...
- Linux常见英文报错中文翻译(菜鸟必知)
Linux常见英文报错中文翻译(菜鸟必知) 1.command not found 命令没有找到 2.No such file or directory 没有这个文件或目录 3.Permission ...