如何让效果逼真
来源：3-4 编程挑战
幕布斯4149312
2016-05-17 02:01
效果是出来了，但是3d旋转的效果并不逼真，因为转的时候没有阴影，有什么好的方法能让cube转的时候有明显的明暗效果呢？
写回答
关注
1回答
-
- 慕尼黑4423355
- 2016-05-19 23:13:23
做个立方体出来就逼真了。。。
阴影的话因为毕竟不是真的3d...所以只能勉强在地下铺一个不会变化的阴影，动态阴影就别想了。。。
除非线性代数和立体几何学究天人能换算个3d到2d的阴影投影公式，再用canvas画出来。。。
下面是本人的3d盒子（没做阴影）。。。仅供参考。。。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D CUBE</title> <link href="css/clear.css" rel="stylesheet" type="text/css" media="all" /> <style> html,body{width:100%; height:100%; perspective: 400px; perspective-origin: 50% 50%;} #central_helper{position: absolute; left: 50%; top: 50%;} .cube{ position: relative; left: -100px; top: -100px; height: 200px; width: 200px; /*margin-left: -100px; margin-top: -100px;*/ /*使用margin虽然能够定位到屏幕正中心，但是对于3d变换无效(top部分的偏移量没有消除）*/ /*border: solid blue 2px;*/ /*参考框*/ cursor: move; /*background: rgba(0,0,125,0.2);*/ /*参考平面*/ transform-style: preserve-3d; transition: transform 0.1s linear; /*transform: rotateX(-45deg) rotateY(45deg) scale3d(1.0,1.0,1.0);*/ } /*.cube:hover{ transform: scale3d(2.0,2.0,2.0); }*/ .cube>div{ position: absolute; left: 50px; top: 50px; height: 100px; width: 100px; background: orange; border: solid black 1px; box-sizing: border-box; text-align: center; line-height: 100px; } .cube_top{transform: rotateX(90deg) translateZ(52px);} .cube_front{transform: rotateX(0deg) translateZ(52px);} .cube_bottom{transform: rotateX(-90deg) translateZ(52px);} .cube_back{transform: rotateX(180deg) translateZ(52px);} .cube_left{transform: rotateY(-90deg) translateZ(52px);} .cube_right{transform: rotateY(90deg) translateZ(52px);} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <script> window.onload=function(){ var cube=$('.cube').get(0); var screenw=$(window).width(); var screenh=$(window).height(); var IS_MOUSE_ON=false; $(window).mousemove(function(ev){ var ydeg=Math.round((ev.pageX/screenw-0.5)*720.0)+'deg'; var xdeg=Math.round((0.5-ev.pageY/screenh)*720.0)+'deg'; cube.style.transform='rotateX('+xdeg+') rotateY('+ydeg+')'; document.title='('+xdeg+','+ydeg+')'; if(IS_MOUSE_ON){ cube.style.transform+='scale3d(2.0,2.0,2.0)'; } }); $(window).mousedown(function(){ IS_MOUSE_ON=true; }); $(window).mouseup(function(){ IS_MOUSE_ON=false; }); } </script> </head> <body> <div id="central_helper"> <section> <div>上</div> <div>前</div> <div>下</div> <div>背</div> <div>左</div> <div>右</div> </section> </div> </body> </html>
CSS3 3D 特效
使用CSS3当中的属性，创建真实可用的三维效果
78572 学习 · 425 问题
相似问题