                        課程
                    
                        /前端開發(fā)
                        
                            /CSS3
                        
                        /CSS3 3D 特效

如何讓效果逼真

效果是出來了，但是3d旋轉(zhuǎn)的效果并不逼真，因為轉(zhuǎn)的時候沒有陰影，有什么好的方法能讓cube轉(zhuǎn)的時候有明顯的明暗效果呢？

幕布斯4149312

2016-05-17

源自：CSS3 3D 特效 3-4

關(guān)注問題我要回答

1070

操作

收起

1 回答

慕尼黑4423355
2016-05-19

做個立方體出來就逼真了。。。

陰影的話因為畢竟不是真的3d...所以只能勉強在地下鋪一個不會變化的陰影，動態(tài)陰影就別想了。。。

除非線性代數(shù)和立體幾何學(xué)究天人能換算個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>