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教程(这里只做代码分析)