css3的3d

看了朋友的博客园css3的3d教程，自己也练习了一下 他的教程已经很详细了http://www.cnblogs.com/duanhuajian/archive/2012/08/30/2664026.html

我这里只从代码上写一些我写代码的时候感受（仅限谷歌浏览器）

这是我写的效果图

下边是代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title> New Document </title>
 6 <meta name="Keywords" content="">
 7 <meta name="Description" content="">
 8 <style type="text/css">
 9 #divd{
10     -webkit-transform-style:preserve-3d;
11     /*3d必须代码，子元素变成3d效果*/
12     width: 200px;height: 200px;
13     /*border: 5px solid red;*/
14     margin: 300px auto;
15     /*-webkit-perspective:1700px;*/
16     /*查看这个块的远近距离设置*/
17     /*-webkit-perspective-origin:-700px 50px;*/
18     /*查看这个3d块的角度*/
19     -webkit-animation: aaa 10s ease infinite;
20     position: relative;
21 }
22 @-webkit-keyframes aaa {
23     0%{
24     -webkit-transform-origin:left bottom;
25     -webkit-transform: rotateY(0deg) rotateX(45deg) rotateZ(-45deg);}
26     100%{
27     -webkit-transform-origin: left bottom;
28     -webkit-transform: rotateY(360deg) rotateX(45deg) rotateZ(-45deg);
29     }
30 }
31 #div1{
32     background: #FC7405;opacity: 0.5;
33     width: 200px;height:200px;
34     -webkit-transform-origin: center top;
35     -webkit-transform:rotateX(90deg);
36     position: absolute;
37     
38 }
39 #div2{
40     background: green;opacity: 0.5;
41     width: 200px;height: 200px;
42     -webkit-transform: translateZ(200px);
43     /*以z轴平移*/
44     position: absolute;
45 }
46 #div3{
47     width: 200px;height: 200px;opacity: 0.5;
48     background: #079EFC;
49     position: absolute;
50     -webkit-transform-origin:center bottom;
51     -webkit-transform: rotateX(-90deg);
52 }
53 #div4{
54     width: 200px;height: 200px;opacity: 0.5;
55     background: yellow;
56     -webkit-transform-origin:right center ;
57     -webkit-transform: rotateY(90deg);
58     position: absolute;
59 }
60 #div5{
61     width: 200px;height: 200px;opacity: 0.5;
62     background: #F707D3;
63     -webkit-transform-origin:left center ;
64     -webkit-transform: rotateY(-90deg);
65     position: absolute;
66 }
67 #div6{
68     width: 200px;height: 200px;opacity: 0.5;
69     background: #7707F7;
70     position: absolute;
71 }
72 </style>
73 </head>
74 
75 <body>
76 <div id="divd">
77     <div id="div1"></div>
78     <div id="div2"></div>
79     <div id="div3"></div>
80     <div id="div4"></div>
81     <div id="div5"></div>
82     <div id="div6"></div>
83     
84 </div>
85 </body>
86 <script type="text/javascript">
87 
88 </script>
89 </html>

------------------------------------------------华丽分割线 以下是感受 注意 说明的一些----------------------------------------------------------

代码第10行：-webkit-transform-style:preserve-3d;

这个命令是让该div下的子元素据有3d效果 当然 具有这条命令的div下的子元素使用positon：absolute + transform：rotateX/Y/Z（）扭动后都可以看出这些子元素都是带3d的效果了 （当然需要看现实效果的人有3d立体图的概念）

代码第15行：-webkit-perspective:1700px;

在做3d过程中 你需要调整你看的这个div的角度 从而调整你每个块应该怎么扭转组成一个盒子 这个命令就设置你看这个盒子的是远近看的距离 意思就是 如果你想把你的盒子放大一点看 你可以把这个距离的值调小一点 如果你想远距离看 就可以把这个距离值调大一点 总之就是近远 当然这个在做的时候命令还是挺有用的 做玩之后 就可以注销掉了 当然如果你想做一个放大缩小的效果 可以更改该css属性的值 来增加页面的交互感

代码第17行：-webkit-perspective-origin:-700px 50px;

当然 在做3d过程中  不仅需要调整远近距离 更需要调整角度 尤其是没有设置opacity 的时候 改如何看块的扭动度是否正确 就需要这个命令 这个命令第一值是x轴转动 第2个值是y轴的转动 也就是说第一个值水平转动 第2个值是垂直转动 当网页写完后 就可以注销掉了

代码第19行：-webkit-animation: aaa 10s ease infinite;

是css3自带的动画效果 animation 这里就不解释了；值得注意的是在设置动画效果的时候 其实设置的是带transform-style:preserve-3d;这个css属性的div的效果 当然如果无法达到想要的效果的时候 就需要将div加个border 在用transform-origin去设置原点（原点就是以这个点去运动的意思）这个时候 就可以看到div的运动方式是以设置的原点为原点作为运动 想象再通过这个原点的去更改想要的运动方式 也就是改transform:rotateX/Y/Z()度数 做成想要的效果 如果不理解 可以看看朋友博客园的3d教程（这里只做代码分析）

posted @ 2012-09-18 14:56  ZhenJie.W  阅读(345)  评论(0)    收藏  举报