3D魔方场景

3D魔方场景实例

效果：

源码：

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

<!DOCTYPE html>

<html>

<head>

<title>3D魔方场景</title>

*{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>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

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>

时间： 2024-10-05 06:07:24

3D魔方场景

3D魔方场景的相关文章

3D魔方的思路与实现

SceneKit:简单的3D游戏场景搭建

DirectX11--实现一个3D魔方(3)

用纯原生态javascript+css3 写的3D魔方动画旋扭特效

unity 3D游戏场景转换

CSS3中的3D动画实现(钟摆、魔方)--实现代码

Citrix 3D虚拟化解决方案之小结

创建基本的2D场景（part1）

WEB 3D SVG CAD 向量几个实施（转）