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画出一个立方体---转的更多相关文章

  1. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  2. 如何使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...

  3. 如何用CSS3画出一个立体魔方？

    前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...

  4. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  5. WPF Blend 脑洞大开的问题：如何用Blend得到或画出一个凹槽、曲面。

    原文:WPF Blend 脑洞大开的问题:如何用Blend得到或画出一个凹槽.曲面. 目标图: 步骤一(放置一个矩形,填充蓝色): 步骤二(复制该矩形,并调整边角,填充粉红色): 第三部:让图形部分重 ...

  6. 用HTML+CSS画出一个同心圆

    参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...

  7. 如何在canvas中画出一个太极图

    先放一个效果图: 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...

  8. 利用LineRenderer画出一个圆，类似于lol中的攻击范围

    http://www.unity蛮牛.com/blog-5945-1409.html 本人大四狗,学unity半年有余,写此文章纯粹记录自己的心得. 废话不多说,进入主题.... 效果如图: 首先要理 ...

  9. 如何用CSS3画出懂你的3D魔方？

    作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言 最近在写<每周动画点点系列>文章,上一期分享了& ...

随机推荐

  1. OOP 1.4 内联函数和重载函数函数参数缺省值

    1.内联函数 存在的背景:函数调用存在开销(调用时候参数压栈,返回地址压栈:返回时从栈取出返回地址,跳转到返回地址.总共需要几条指令的开销).如果函数指令较少,调用多次,函数调用的开销占比大. 内联函 ...

  2. 已知一个数出现的次数超过了一半，请用O(n)的复杂度的算法找出这个数

    #include<iostream> using namespace std; //#define maxn 2000010 #include<stdio.h> //int a ...

  3. eclipse建包的一些细节

    com.a :com.b 等会先在com文件夹下在 建立 a,b两个子文件夹,引用路径时 不可"*\\com.a\\*"而是"*\\com\\a\\*"这点基础 ...

  4. 第四章 深入JSP技术

    JSP简介 JSP工作原理 JSP是一种servlet,但先部署后编译. JSP生命周期 运行时只会有一个实例,同servlet. JSP语法 JSP元素和模板数据 模板数据就是JSP中的HTML代码 ...

  5. Scrum 项目准备3.0

    SCRUM 流程的步骤2: Spring 计划 1. 确保product backlog井然有序.(参考示例图1) 2. Sprint周期,一个冲刺周期,长度定为两周,本学期还有三个冲刺周期. Spr ...

  6. c文法

    程序→<外部声明>|<程序> 外部声明→<功能定义>|<声明> 功能定义→<声明复合语句的类型> 类型→<VOID| CHAR| IN ...

  7. 结对项目之对PIE的测试程序

    项目要求: 构造程序,分别是: 不能触发Fault. 触发Fault,但是不能触发Error. 触发Error,但是不能产生Failure. 结对对象:陈秋月  学号:2013110404  博客地址 ...

  8. 【Leetcode】50. Pow(x, n)

    Implement pow(x, n). Example 1: Input: 2.00000, 10 Output: 1024.00000 Example 2: Input: 2.10000, 3 O ...

  9. Android中res/layout文件夹里新建布局文件，R中不生成ID的奇葩错误

    新浪微博:http://weibo.com/u/1928100503 网上看了下,发现大都是xml文件名大写而导致的id不能生成的问题,但在下的问题却不是大小写的问题,在下发现,当你的layout目录 ...

  10. PHP中普通属性和静态属性

    普通属性(实例属性): 实例的单词为:instance 实例,其实也叫做“对象”: 普通(实例)属性,就是一个可以在该类实例化出的对象上使用的属性! 定义形式: class  类名{ var  $属性 ...