css3实践—创建3D立方体
css3实践—创建3D立方体
要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是先弄清楚3D的坐标系吧，从网上搜了一张经典坐标系图，供大家回顾一下。
1、3D试图
transform-style：flat(默认，二维效果) / preserve-3d(三维效果)。设置一个元素的transform-style:preserve-3d；只影响这个元素的子元素(如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d)。这样所有子元素都可以相对与父元素的平面进行3d变形操作。和二维变形一样，三维变形可以使用transform属性来设置。可以通过制定的函数或者通过三维矩阵来对元素变型。列举几个函数：
translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;
scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleY()。
rotateX(angle) 是元素依照x轴旋转；
rotateY(angle) 是元素依照y轴旋转；
rotateZ(angle) 是元素依照z轴旋转。
2、透视/景深效果
perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了）。
当元素没有设置perspective(length)时，所有后代元素被压缩在同一个二维平面上，不存在景深的效果。如果设置perspective(length)后，将会看到三维的效果。默认的透视视角中心在容器(是perspective所在的元素，不是他的后代元素)的中点，也就是perspective-origin: 50% 50%。当然你也可以自己设置，比如：左上角-webkit-perspective-origin: 0px 0px；。
综合以上两点，我们可以通过几个实例，来深入了解下perspective(length); 和 transform-style:preserve-3d；
（1）当设置perspective(length);不设置transform-style:preserve-3d；当元素静止时，会有立体的效果：
（2）当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：
（3）当设置transform-style:preserve-3d；不设置perspective(length);当元素静止时，不会有立体的效果。
（4）当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：
（5）只有当两个值都设置，不管是静止还是旋转，都会看到立体的效果。
注意：（1）如果一个元素以x轴或y轴旋转90度以上的话，那么它的背面将面向用户。背面的元素始终是透明的，所以用户通过后面看到正面的反向形态，就像是从在玻璃门后面看对外张贴的标志。为了防止显示镜像的前面。可以将backface-visibility设置为hidden;如果backface-visibility:hidden;那么这个元素就不会在背面可见了。这么做的一个原因就是，想一个元素有两个面，就像一个扑克牌。比如：创建一张扑克牌，正面和背面一定不一样，这两个面的位置是背靠背的。这两个元素一起转动，正面逐步向后反转隐藏，同时背面向前反转并出现。如果背面的元素是可见的，旋转时它将掩盖它底下的元素，而不是露出它下面的元素。
（2）如果父元素设置overflow：hidden；那么子元素就无法跳出父元素的平面，也就不能出现3D效果。就如同，transform-style：flat；
最后，把我写的小例子分享给大家（此例子仅是基于-webkit-内核，如不能观看效果，建议换成chrome浏览器）。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3D立方体</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
/*重置{*/
* { padding: 0; margin: 0; }img{border:0;}li{list-style:none;}
/*}重置*/
ul{width:200px;height:200px;margin:100px auto;position:relative;-webkit-transform-style:preserve-3d;} /*transform-style:preserve-3d;整个ul效果3D*/
/*如果在ul里设置：-webkit-perspective:400px;-webkit-perspective-origin:0% 50%; 则会有透视、景深的效果*/
li{width:200px;height:200px;position:absolute;top:0;left:0;text-align:center;line-height:200px;font-size:80px;font-weight:bold;color:#fff;} /*position:absolute;让每个面都定位*/
li:nth-child(1){background:rgba(255,0,0,1);-webkit-transform:rotateX(90deg) translateZ(100px);}
li:nth-child(2){background:rgba(0,255,255,1);-webkit-transform:rotateX(270deg) translateZ(100px);}
li:nth-child(3){background:rgba(255,0,255,1);-webkit-transform:rotateY(90deg) translateZ(100px);}
li:nth-child(4){background:rgba(0,255,0,1);-webkit-transform:rotateY(270deg) translateZ(100px);}
li:nth-child(5){background:rgba(200,200,0,1);-webkit-transform:translateZ(-100px);}
li:nth-child(6){background:rgba(0,0,255,1);-webkit-transform: translateZ(100px) ;}
.button{
width: 250px;
height: 200px;
margin: 20px auto;
position:relative;
}
/*定位按钮*/
input{width:50px;height:30px;position:absolute;cursor:pointer;}
input:nth-child(1){left:100px;top:0;}
input:nth-child(2){left:200px;top:50px;}
input:nth-child(3){left:0px;top:50px;}
input:nth-child(4){left:100px;top:100px;}
input:nth-child(5){left:100px;top:50px;}
/*****当执行下列css时，立方体无限自由旋转******/
/*ul{-webkit-animation:run 5s linear infinite ;}
@-webkit-keyframes run{
0%{-webkit-transform: rotateX(0deg) rotateY(0deg) }
100%{-webkit-transform:rotateX(360deg) rotateY(360deg) }
}
*/
</style>
</head>
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="button">
<input type="button" value="上">
<input type="button" value="右">
<input type="button" value="左">
<input type="button" value="下">
<input type="button" value="重置">
</div>
<script type="text/javascript">
<!--
var ul=document.getElementById('ul');
var inputs=document.getElementsByTagName('input');
var x=0,y=0;
/////////////////////////鼠标控制
for(var i=0;i<inputs.length;i++){
inputs[i].onclick=run;
}
function run(){
ul.style.webkitTransition='-webkit-transform 3s linear'; //设置立方体变换的属性、持续时间、动画类型
if(inputs[0]==this){x+=90;}
if(inputs[1]==this){y+=90;}
if(inputs[2]==this){y-=90;}
if(inputs[3]==this){x-=90;}
if(inputs[4]==this){x=0;y=0; ul.style.webkitTransition='-webkit-transform 0.1s linear';} //当点击重置按钮时，迅速转回到初始状态。
ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)"; //变换效果（沿X轴和Y轴旋转）
}
////////////////////////键盘控制
document.addEventListener('keydown', function(e){
ul.style.webkitTransition='-webkit-transform 3s linear';
switch(e.keyCode){
case 37: y -= 90; //左箭头
break;
case 38: x += 90; //上箭头
break;
case 39: y += 90; //下箭头
break;
case 40: x -= 90; //右箭头
break;
case 13: x=0; y=0; //回车 （当回车时，迅速转回初始状态）
ul.style.webkitTransition='-webkit-transform 0.1s linear';
break;
}
ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)"; //变换效果（沿X轴和Y轴旋转）
}, false);
//-->
</script>
</body>
</html>
| 【作者】：@挨踢前端 |
| 【出处】：http://www.cnblogs.com/duanhuajian/archive/2012/08/30/2664026.html |
| 【声明】：所有博文标题后加（share）的表示收集的他人优秀文章，其余的则为原创。欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！ |
css3实践—创建3D立方体的更多相关文章
- 基于HTML5/CSS3可折叠的3D立方体动画
今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览 源码下载 实现的代码 ...
- 用CSS3画出一个立方体---转
css3实践—创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）
本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
- css3创建3D场景
浏览器本身是一个2维平面,对于3D的情况,实际上是增加了一个维度(深度),所以我们需要创建一个3D场景.这时浏览器不仅仅是一个平面了,更像是一个窗口,我们透过这个窗口去观察里面的三维世界.所谓的创建3 ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- CSS3之3D立方体效果
下面代码可实现3D立方体,比较好理解,就是让每个面先平移到指定位置,然后旋转90度 <!DOCTYPE html> <html lang="en"> < ...
- 【CSS3】3D立方体动画
关于CSS3的3D立方体动画 知识点: 1.每个元素有独立的坐标系 2.坐标系随当前元素的改变而发生改变 3.立方体由静态transform参数构成 4.通过给容器添加动画使立方体运动 效果图: &l ...
随机推荐
- php的各种配置
问题:1.如果去掉URL_MODEL=1时的index.php第一步:把Apache配置文件中的LoadModule rewrite_module modules/mod_rewrite.so 取消注 ...
- angularjs应用骨架(3)
好,继续上一章节我们继续聊聊angularjs骨架.开发任何一款优秀的应用都会面临一项非常困难的工作,那就是找到一种合适的方式方法把代码组织在合适的功能范围内.我们已经看过控制器的处理方式,它会提供一 ...
- MYSQL常用命令集合(转载)
文章出处:http://www.cnblogs.com/q1ng/p/4474501.html 1.导出整个数据库mysqldump -u 用户名 -p --default-character-set ...
- centos7 玩aapt 安卓应用apk解包工具的安装
最近在做一个应用市场的项目,需要在centos7下面对apk解包读取其信息,这就想到了使用Google的解包工具aapt,但是由于中国的原因,国内访问原生工具的地址就有些麻烦,这里就贴出地址:http ...
- C#一个字符串的加密与解密
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.S ...
- Uninstall office15 click-to-run extensibility Component
Summary : Uninstall office15 click-to-run extensibility Component,How to resolve Uninstall office15 ...
- LeetCode(4) || Longest Palindromic Substring 与 Manacher 线性算法
LeetCode(4) || Longest Palindromic Substring 与 Manacher 线性算法 题记 本文是LeetCode题库的第五题,没想到做这些题的速度会这么慢,工作之 ...
- Install php-mcrypt on CentOS 6
http://stackoverflow.com/questions/17109818/install-php-mcrypt-on-centos-6
- Django Sqlite3 数据库向MySQL迁移
整合了两个URL而来.. 1,http://www.phodal.com/blog/django-mezzanine-sqlite3-migrate-mysql/ 2,http://www.ziqia ...
- 测试WWW方案（反向代理，负载均衡，HTTP加速缓存）
大约图如下: NGINX FRONT(80)--->VARNISH(8080)---->LNMP BACKEND 1(80) |--->LNMP BACKEND 2(80) 主要是前 ...