用CSS3画出一个立方体---转
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;}
/*如果在ul里设置：-webkit-perspective:400px;-webkit-perspective-origin:0% 50%; 则会有透视、景深的效果*/
li{width:200px;height:200px;position:absolute;text-align:center;line-height:200px;font-size:80px;font-weight:bold;color:#fff;}
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: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>
用CSS3画出一个立方体---转的更多相关文章
- 使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
- 如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
- 如何用CSS3画出一个立体魔方？
前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- WPF Blend 脑洞大开的问题：如何用Blend得到或画出一个凹槽、曲面。
原文:WPF Blend 脑洞大开的问题:如何用Blend得到或画出一个凹槽.曲面. 目标图: 步骤一(放置一个矩形,填充蓝色): 步骤二(复制该矩形,并调整边角,填充粉红色): 第三部:让图形部分重 ...
- 用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...
- 如何在canvas中画出一个太极图
先放一个效果图: 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...
- 利用LineRenderer画出一个圆，类似于lol中的攻击范围
http://www.unity蛮牛.com/blog-5945-1409.html 本人大四狗,学unity半年有余,写此文章纯粹记录自己的心得. 废话不多说,进入主题.... 效果如图: 首先要理 ...
- 如何用CSS3画出懂你的3D魔方？
作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...
随机推荐
- C++ map 遍历
#include <iostream> #include <map> using namespace std; int main(){ map<int,int> m ...
- AVL树 算法思想与代码实现
AVL树是高度平衡的二叉搜索树,按照二叉搜索树(Binary Search Tree)的性质,AVL首先要满足: 若它的左子树不为空,则左子树上所有结点的值均小于它的根结点的值: 若它的右子树不为空, ...
- Fiveplus--王者光耀1
**光耀101** 汇总博客: 关文涛: 博客地址:随笔1 随笔2 杨蓝婷: 博客地址:随笔1 随笔2 蔡雅菁: 博客地址:随笔1 随笔2 黄森敏: 博客地址:随笔1 随笔2 林兴源: 博客地址:随笔 ...
- ASP.NET Zero--2.如何启动
1.直接启动 VS中直接启动 2.IIS站点 IIS中配置一个站点来启动(推荐) 3.登录 系统默认创建2个用户 默认用户名:admin 密码:123qwe 租户:Default 默认用户名:adm ...
- 《DWZ笔记一》<select>动态联动菜单
联动菜单,即组合框Combo box,在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name ...
- 【转】MySQL数据表中记录不存在则插入，存在则更新
mysql 记录不存在时插入在 MySQL 中,插入(insert)一条记录很简单,但是一些特殊应用,在插入记录前,需要检查这条记录是否已经存在,只有当记录不存在时才执行插入操作,本文介绍的就是这个问 ...
- 【C++】C++函数重载的总结
函数重载: 出现在相同作用域中的两个函数,如果具有相同的名字而形参表不同,则称为重载函数(overloaded function).一定要注意函数重载的两个关键词:形参列表和作用域. 任何程序有且仅有 ...
- 【前端学习笔记】利用iframe实现表单的无刷新提交案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- cdq分治学习
看了stdcall大佬的博客 传送门: http://www.cnblogs.com/mlystdcall/p/6219421.html 感觉cdq分治似乎很多时候都要用到归并的思想
- Android四大组件之Intent
Intent不是android几大组件框架,但是确实是android 各大组件之间沟通的桥梁. 尤其Intent对于activity有很大的关系. 一下是我个人对task以及backstack的总结.