Skip to content

Instantly share code, notes, and snippets.

@anthonydelgado

anthonydelgado/3d world

Created January 7, 2016 12:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anthonydelgado/590e92ce93efe5efedb4 to your computer and use it in GitHub Desktop.
Save anthonydelgado/590e92ce93efe5efedb4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
3d world
<html>
<head>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0
}
body {
color: #fff;
text-shadow: 0 -1px 0 rgba( 0, 0, 0, .6 );
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 16px;
overflow: hidden;
}
#viewport {
-webkit-perspective: 400;
-moz-perspective: 400;
-o-perspective: 400;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.28, rgb(0,0,0)),
color-stop(0.64, rgb(85,85,85))
);
}
#world {
position: absolute;
left: 50%;
top: 50%;
margin-left: -256px;
margin-top: -256px;
height: 512px;
width: 512px;
/*background-color: rgba( 255, 0, 0, .2 );*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
font-size: 500px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="viewport" >
<div id="world" ><i class="fa fa-lightbulb-o"></i>
</div>
</div>
<script>
var world = document.getElementById( 'world' ),
viewport = document.getElementById( 'viewport' ),
d = 0,
worldXAngle = 0,
worldYAngle = 0;
window.addEventListener( 'mousewheel', onContainerMouseWheel );
window.addEventListener( 'DOMMouseScroll', onContainerMouseWheel );
window.addEventListener( 'mousemove', function( e ) {
worldYAngle = -( .5 - ( e.clientX / window.innerWidth ) ) * 180;
worldXAngle = ( .5 - ( e.clientY / window.innerHeight ) ) * 180;
updateView();
} );
function updateView() {
var t = 'translateZ( ' + d + 'px ) rotateX( ' + worldXAngle + 'deg) rotateY( ' + worldYAngle + '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 * -5 : event.wheelDelta / 8 );
updateView();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment