                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3 3D 特效

如何让效果逼真

效果是出来了，但是3d旋转的效果并不逼真，因为转的时候没有阴影，有什么好的方法能让cube转的时候有明显的明暗效果呢？

幕布斯4149312

2016-05-17

源自：CSS3 3D 特效 3-4

关注问题我要回答

1021

操作

收起

1 回答

慕尼黑4423355
2016-05-19

做个立方体出来就逼真了。。。

阴影的话因为毕竟不是真的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>