HTML
<body> <div id="viewport" > <div id="world" > <div id="container" > <p>hello world!</p> <p>hello world!</p> <p>hello world!</p> <p>hello world!</p> <p>hello world!</p> <p>hello world!</p> <p>hello world!</p> <p>hello world!</p> <p>hello world!</p> </div> </div> </div> </body>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 16px;
overflow: hidden;
}
#viewport {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
background-color: rgb(100,120,70);
}
#world {
position: absolute;
left: 50%;
top: 50%;
margin-left: -256px;
margin-top: -256px;
height: 512px;
width: 512px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
}
#world p {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1024px;
width: 2048px;
margin-top: -.5em;
text-align: center;
font-size: 148px;
white-space: nowrap;
font-weight: bold;
text-shadow: none;
text-transform: uppercase;
color: black;
line-height: 1em;
}
#world p:nth-child(1) { text-shadow: 0 0 30px black }
#world p:nth-child(2) { color: rgb(175,175,175) }
#world p:nth-child(3) { color: rgb(185,185,185); -webkit-transform: translateZ( 1px ); -moz-transform: translateZ( 1px ) }
#world p:nth-child(4) { color: rgb(195,195,195); -webkit-transform: translateZ( 2px ); -moz-transform: translateZ( 2px ) }
#world p:nth-child(5) { color: rgb(205,205,205); -webkit-transform: translateZ( 3px ); -moz-transform: translateZ( 3px ) }
#world p:nth-child(6) { color: rgb(215,215,215); -webkit-transform: translateZ( 4px ); -moz-transform: translateZ( 4px ) }
#world p:nth-child(7) { color: rgb(225,225,225); -webkit-transform: translateZ( 5px ); -moz-transform: translateZ( 5px ) }
#world p:nth-child(8) { color: rgb(235,235,235); -webkit-transform: translateZ( 6px ); -moz-transform: translateZ( 6px ) }
#world p:nth-child(9) { color: rgb(245,245,245); -webkit-transform: translateZ( 7px ); -moz-transform: translateZ( 7px ) }
#world p:nth-child(10) { color: rgb(255,255,255); -webkit-transform: translateZ( 8px ); -moz-transform: translateZ( 8px ) }
#world p:nth-child(11) { color: rgb(255,255,255); -webkit-transform: translateZ( 9px ); -moz-transform: translateZ( 9px ) }
JAVA SCRIPT
var world = document.getElementById( 'world' ),
viewport = document.getElementById( 'viewport' ),
d = 0,
p = 400,
worldXAngle = 0,
worldYAngle = 0;
viewport.style.webkitPerspective = p;
viewport.style.MozPerspective = p;
viewport.style.oPerspective = p;
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();
}
دموی آنلاین
تا بارگذاری کامل کمی صبر کنید.
See the Pen 3D Text with ambient occlusion by Jaume Sanchez (@spite) on CodePen