3D魔方场景实例
效果：
源码：
-----------------------------------------
<!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>
