3D Grid

Developer
David Dietle
Size
3,137 Kb
Views
20,240
  1. 3D Grid Previews
  2. 3D Grid HTML Codes
  3. 3D Grid CSS Codes
  4. 3D Grid JS Codes

How do I make an 3d grid?

Kinda Matrix-like? Maybe? Anyway, it's the kind of thing you make because it's cool to look atThe mouse tracking is a little off, but this isn't accurate so much as just kinda cool.. What is a 3d grid? How do you make a 3d grid? This script and codes were developed by David Dietle on 24 September 2022, Saturday.

3D Grid Previews
IQ Test

3D Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Grid</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="fill"> <div id="grid"> <div id="vertical" style="height:100%;width:3px;left:50%;"></div> <div id="horizontal" style="width:100%;height:3px;top:50%;"></div> <div class="crosshair"></div> <div class="recitalV" style="height:100%;width:2px;"></div> <div class="recitalH" style="width:100%;height:3px;"></div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Grid - Script Codes CSS Codes

body { background-color:black; /*background-image:url(https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg); background-position:center; background-repeat:no-repeat;*/ } #fill div { position: absolute; } #grid, #grid2, #grid3 { position: absolute; top: 0px; left: 0px; height: 600px; width: 600px; background-color: transparent; z-index:0; transform-style: preserve-3d; border: solid 1px darkgrey; bottom:50px; box-shadow: 30px 30px 20px rgba(0,255,0,.3); } #grid2 { box-shadow: 30px -30px 20px rgba(0,255,0,.3); } .navbar, footer, hr { display: none; } #fill { position: absolute; top: 10px; left: 50%; max-width: 600px; max-height: 600px; width: 600px; height: 600px; background-color: transparent; margin-left: -300px; transform: rotateY(25deg) rotateX(-25deg); transform-style: preserve-3d; } #grid .crosshair, #grid2 .crosshair, #grid3 .crosshair{ height: 25px; width: 25px; background-color: rgba(0,255,255,.35); stroke-width: 1; border:solid aqua 1px; z-index: 100; cursor:crosshair; } .recitalV, .recitalH { background-color: aqua; z-index: -1; } .line:hover { background-color: cyan; z-index:1; } .v { width: 1px; height: 100%; } .h { height: 1px; width: 100%; } [new] { background-color: grey; z-index: 2; opacity:.35; } .mainLine { background-color: lime; }

3D Grid - Script Codes JS Codes

$(document).ready(function () { graph(); $('#fill').parent().css({ 'perspective': '1000px' }) $('#fill').mousemove(function (e) { var w = $(this).outerWidth(); var h = $(this).outerHeight(); var left = (e.clientX - (w/2)-170); var top = (e.clientY - 10); if (left > 0 && left < w && top > 0 && top < h) { $(this).find('.recitalV').css('left', left); $(this).find('.recitalH').css('top', top); var size = 25; $(this).find('.crosshair').css({ 'left': left - (size / 2) + 'px', 'top': top - (size / 2) + 'px' }); } }); }); function graph() { $('#fill').ready(function () { var spacing = 15; $('.line').each(function (i, line) { if ($(line).attr('id') == undefined) { $(line).remove(); } }); $('#vertical').removeClass('mainLine'); $('#horizontal').removeClass('mainLine'); var intervalColor = 'maroon'; var h = 600; var w = 600; var markInterval = 5; var vCount = ((h / 2) / spacing); var hCount = ((w / 2) / spacing); var ii = 0; for (var i = 1; i < hCount; i++) { var v = $('#vertical').clone(); $(v).addClass('line v'); $(v).attr('new', ''); $(v).removeAttr('id'); $(v).removeAttr('style'); var origLeft = w / 2; var newLeft = (spacing * i) + origLeft; $(v).css({ 'left': newLeft + 'px' }); $('#fill div#grid').append(v); if (ii == markInterval) { $(v).css({ 'background-color': intervalColor }); ii = 0; } else { ii++; } } ii = 0; for (var i = 1; i < hCount; i++) { var v = $('#vertical').clone(); $(v).addClass('line v'); $(v).attr('new', ''); $(v).removeAttr('id'); $(v).removeAttr('style'); var origLeft = w / 2; var newLeft = origLeft - (spacing * i); $(v).css({ 'left': newLeft + 'px' }); $('#fill div#grid').prepend(v); if (ii == markInterval) { $(v).css({ 'background-color': intervalColor }); ii = 0; } else { ii++; } } ii = 0; for (var i = 1; i < vCount; i++) { var hz = $('#horizontal').clone(); $(hz).addClass('line h'); $(hz).attr('new', ''); $(hz).removeAttr('id'); $(hz).removeAttr('style'); var origTop = h / 2; var newTop = (spacing * i) + origTop; $(hz).css({ 'top': newTop + 'px' }); $('#fill div#grid').append(hz); if (ii == markInterval) { $(hz).css({ 'background-color': intervalColor }); ii = 0; } else { ii++; } } ii = 0; for (var i = 1; i < vCount; i++) { var hz = $('#horizontal').clone(); $(hz).addClass('line h'); $(hz).attr('new', ''); $(hz).removeAttr('id'); $(hz).removeAttr('style'); var origTop = h / 2; var newTop = origTop - (spacing * i); $(hz).css({ 'top': newTop + 'px' }); $('#fill div#grid').prepend(hz); if (ii == markInterval) { $(hz).css({ 'background-color': intervalColor }); ii = 0; } else { ii++; } } $('#vertical').addClass('mainLine'); $('#horizontal').addClass('mainLine'); var g2 = $('#grid').clone(); var g3 = $('#grid').clone(); $(g2).css({ 'transform': 'rotateX(90deg)' }).attr('id', 'grid2'); $(g3).css({ 'transform': 'rotateY(90deg)' }).attr('id', 'grid3'); $('#fill').append(g2); $('#fill').append(g3); }); }
3D Grid - Script Codes
3D Grid - Script Codes
Home Page Home
Developer David Dietle
Username ddietle
Uploaded September 24, 2022
Rating 4
Size 3,137 Kb
Views 20,240
Do you need developer help for 3D Grid?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David Dietle (ddietle) Script Codes
Name
Pure CSS Spinning Cogs
Random City
Waving Rebel Alliance Flag
Old Tymey Book
CSS Flickering Image
CSS Only Rotating Cube Menu
Fireflies In The Night Sky
Glowing Acid Bloop
Radmonized Skyscraper With Animation
Lights
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!