3D魔方场景

时间：2015-09-23 11:56:01 阅读：289 评论：0 收藏：0 [点我收藏+]

标签：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>

本文出自 “wennuanyiran” 博客，转载请与作者联系！

3D魔方场景

标签：3d魔方场景

原文地址：http://dingzhaoqiang.blog.51cto.com/5601059/1697381

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行