3D魔方场景实例


效果:

wKioL1YCGYKw_g43AADoJUj_WLc655.jpg


源码:

-----------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>3D魔方场景</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<!--css,js-->
<link rel="stylesheet" href="" />
<style type="text/css">
        *{margin: 0;padding: 0;}
#viewport {bottom: 0;left: 0;overflow: hidden;-webkit-perspective: 3000;perspective: 3000;position: absolute;
right: 0;top: 0;background:#000;-moz-user-select: none; -o-user-select:none;
 -khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none; user-select:none;}
#world {height: 240px;left: 50%;margin-left: -256px;margin-top: -256px;position: absolute;
top: 50%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;width: 512px;}
        .wrapper{width: 100px;height: 100px;margin:10px;
        }
        .box{margin:0 0 0 150px}
        .wrapper .comment{width: 100px;height:100px;margin: auto;position: absolute;font-size: 30px;text-align:center;}
        .wrapper div.u{background:#ebeb05;-webkit-transform: rotateX(90deg) translateZ(50px);transform: rotateX(90deg) translateZ(50px);}
        .wrapper div.d{transform: rotateX(-90deg) translateZ(50px);-webkit-transform: rotateX(-90deg) translateZ(50px);background-color: #ebebeb;}
        .wrapper div.l{-webkit-transform: rotateY(-90deg) translateZ(50px);transform: rotateY(-90deg) translateZ(50px);background-color:#054494;}
        .wrapper div.r{-webkit-transform: rotateY(90deg) translateZ(50px);transform: rotateY(90deg) translateZ(50px);background-color:#059440;}
        .wrapper div.f{-webkit-transform: rotateX(0deg) translateZ(50px);transform: rotateX(0deg) translateZ(50px);background-color: #c50513;}
        .wrapper div.fll{width: 100px;height:100px;float: left;}
        .wrapper div.b{-webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(50px);transform: rotateX(180deg) rotateZ(180deg) translateZ(50px);background-color: #ea820e;}        
        .wrapperR div.u{background:#ebeb05;-webkit-transform: rotateX(90deg) translateZ(-50px) translateY(-110px);transform: rotateX(90deg) translateZ(-50px) translateY(-110px);}
        .wrapperR div.d{transform: rotateX(-90deg) translateZ(-50px) translateY(110px);-webkit-transform: rotateX(-90deg) translateZ(-50px) translateY(110px);background-color: #ebebeb;}
        .wrapperR div.l{-webkit-transform: rotateY(-90deg) translateZ(-50px) translateX(-110px);transform: rotateY(-90deg) translateZ(-50px) translateX(-110px);background-color:#054494;}
        .wrapperR div.r{-webkit-transform: rotateY(90deg) translateZ(-50px) translateX(110px);transform: rotateY(90deg) translateZ(-50px) translateX(110px);background-color:#059440;}
        .wrapperR div.f{-webkit-transform: rotateX(0deg) translateZ(-60px);transform: rotateX(0deg) translateZ(-60px);background-color: #c50513;}
        .wrapperR div.fll{width: 100px;height:100px;float: left;}
        .wrapperR div.b{-webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(160px);transform: rotateX(180deg) rotateZ(180deg) translateZ(160px);background-color: #ea820e;}
        .wrapper1{}
        .wrapper2{}
        .wrapper3{margin: -220px 0 0 120px;}
        .wrapper4{margin: 10px 0 0 120px;}
        .wrapper5{margin:-210px 0 2px 10px;}
        .wrapper6{}
        .wrapper7{margin: -220px 0 0 120px;}
        .wrapper8{margin: 10px 0 0 120px}
</style>
</head>
<body >
<div id="viewport" >
<div id="world" >
<div class="box">
                <div class="wrapper wrapperL wrapper1">
                    <div class="comment u">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment d" id="dd">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>                
                    </div>
                    <div class="comment l">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment r">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment f">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment b">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                </div>
                <div class="wrapper wrapperL wrapper2">
                    <div class="comment u">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment d" id="dd">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>                
                    </div>
                    <div class="comment l">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment r">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment f">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment b">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                </div>
                <div class="wrapper wrapperL wrapper3">
                    <div class="comment u">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment d" id="dd">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>                
                    </div>
                    <div class="comment l">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment r">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment f">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment b">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                </div>
                <div class="wrapper wrapperL wrapper4">
                    <div class="comment u">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment d" id="dd">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>                
                    </div>
                    <div class="comment l">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment r">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment f">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                    <div class="comment b">
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                        <div class="fll"></div>
                    </div>
                </div>
            <div class="wrapper  wrapperR wrapper5">
                <div class="comment u">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment d" id="dd">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>                
                </div>
                <div class="comment l">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment r">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment f">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment b">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
            </div>
            <div class="wrapper  wrapperR wrapper6">
                <div class="comment u">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment d" id="dd">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>                
                </div>
                <div class="comment l">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment r">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment f">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment b">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
            </div>
            <div class="wrapper  wrapperR wrapper7">
                <div class="comment u">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment d" id="dd">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>                
                </div>
                <div class="comment l">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment r">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment f">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment b">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
            </div>
            <div class="wrapper  wrapperR wrapper8">
                <div class="comment u">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment d" id="dd">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>                
                </div>
                <div class="comment l">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment r">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment f">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
                <div class="comment b">
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                    <div class="fll"></div>
                </div>
            </div>
            </div>
</div>
</div>
<script type="text/javascript">
var world = document.getElementById( 'world' ),
viewport = document.getElementById( 'viewport' ),
d = 0,
worldXAngle = 0,
        startX, startY, flag = false,
worldYAngle = 0;
window.addEventListener( 'mousewheel', onContainerMouseWheel );
window.addEventListener( 'DOMMouseScroll', onContainerMouseWheel );
    window.addEventListener( 'mousedown', function(e){
            startX = e.clientX;
            startY = e.clientY;
            flag = true;
    });
    window.addEventListener( 'mousemove',function(e){
         if(flag){
            worldXAngle =  startX - e.clientX + worldXAngle;
            worldYAngle = startY - e.clientY + worldYAngle;
            updateView(-worldXAngle/100 ,worldYAngle/100,d);
         }
    });
    window.addEventListener( 'mouseup', function(e){
            startX = e.clientX;
            startY = e.clientY;
            flag = false;
    });
function updateView(worldXAngle,worldYAngle,d) {
var t = 'translateZ( ' + d + 'px ) rotateX( ' + worldYAngle + 'deg) rotateY( ' + worldXAngle + 'deg)';
world.style.webkitTransform = t;
world.style.MozTransform = t;
world.style.oTransform = t;
};
function onContainerMouseWheel( event ) {
event = event ? event : window.event;
d = d - ( event.detail ? event.detail * -8 : event.wheelDelta / 2 );
updateView(-worldXAngle/100 ,worldYAngle/100,d);
};
</script>
</body>
</html>


wKioL1YCGcazNvcGAAJJ_Rdv2Bc583.jpg

wKioL1YfD23ScNlhAAGfZLm3Ar4302.jpg