3D Interface

Developer
Chris Evans
Size
3,838 Kb
Views
8,096
  1. 3D Interface Previews
  2. 3D Interface HTML Codes
  3. 3D Interface CSS Codes
  4. 3D Interface JS Codes

How do I make an 3d interface?

What is a 3d interface? How do you make a 3d interface? This script and codes were developed by Chris Evans on 27 December 2022, Tuesday.

3D Interface Previews
IQ Test

3D Interface - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Interface</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="stage"> <h1>H1 Title</h1> <div class="hexagon__row"> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> </div> <div class="hexagon__row"> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> </div> <div class="hexagon__row"> <div class="hexagon"></div> <div class="hexagon"></div> <div class="hexagon"></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Interface - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Bungee+Hairline");
html,
body { font-family: 'Bungee Hairline', sans-serif; color: #FFF;
}
html:before, html:after,
body:before,
body:after { content: ''; position: absolute; display: block; height: 10vh; width: 10vh; border: 2px solid transparent;
}
html:before { border-right-color: #FFF; border-top-color: #FFF; top: 32px; right: 32px;
}
html:after { border-left-color: #FFF; border-bottom-color: #FFF; bottom: 32px; left: 32px;
}
body { background: #333; padding: 64px;
}
body:before { border-left-color: #FFF; border-top-color: #FFF; top: 32px; left: 32px;
}
body:after { border-right-color: #FFF; border-bottom-color: #FFF; bottom: 32px; right: 32px;
}
.stage { position: fixed; top: 50%; left: 50%; transform-style: preserve-3d; transform: perspective(100vw) translate(-50%, -50%); padding: 16px;
}
.stage h1,
.stage h2,
.stage h3,
.stage h4,
.stage h5,
.stage h6,
.stage p { transform: perspective(100vw) translatez(22.5px);
}
.hexagon { position: relative; display: inline-block; background-color: #FFF; margin: 38px 4px 0 4px; width: 104px; height: 60px; cursor: pointer; perspective: 100vw; transform: perspective(100vw) translatez(45px); transition: transform 500ms ease, background 250ms ease; opacity: 0.75;
}
.hexagon:before, .hexagon:after { content: ''; position: absolute; display: block; width: 0; height: 0; border-left: 52px solid transparent; border-right: 52px solid transparent; transition: border-top-color 250ms ease, border-bottom-color 250ms ease;
}
.hexagon:before { top: -30px; border-bottom: 30px solid #FFF;
}
.hexagon:after { bottom: -29px; border-top: 30px solid #FFF;
}
.hexagon:hover { background: #1693A5; transform: perspective(100vw) translateZ(120px);
}
.hexagon:hover:before { border-bottom-color: #1693A5;
}
.hexagon:hover:after { border-top-color: #1693A5;
}
.hexagon__row { clear: left; transform-style: preserve-3d; transform: perspective(100vw);
}
.hexagon__row:nth-of-type(odd) { margin-left: 57px;
}
.class__list { display: table; list-style: none; margin: auto 0; padding: 0; transform-style: preserve-3d; transform: perspective(100vw) rotatey(20deg);
}
.class__list li { font-size: 32px; margin: 32px; padding: 8px 32px; position: relative; text-align: center; opacity: 0.5; cursor: pointer;
}
.class__list li:before { position: absolute; left: 0; display: block; content: ''; background: #FFF; width: 16px; height: 16px; top: 50%; transform: translatey(-50%) rotate(45deg);
}
.class__list li.active { opacity: 1; transform: perspective(100vw) translatez(180px);
}
.class__list li:first-child,
.class__list li:last-child { transform: perspective(100vw) translatez(45px);
}

3D Interface - Script Codes JS Codes

$(document).on('mousemove', function(event) { var $element = $('.stage'), $mouse = { 'x': event.pageX, 'y': event.pageY }, $referenceX = ($(document).width() / 2), $rotationX = (($mouse.x - $referenceX) / 45), $referenceY = ($(document).height() / 2), $rotationY = -(($mouse.y - $referenceY) / 25); $element.css('transform', 'perspective(100vw) translate(-50%, -50%) rotatey(' + $rotationX + 'deg) rotatex(' + $rotationY + 'deg)');
});
3D Interface - Script Codes
3D Interface - Script Codes
Home Page Home
Developer Chris Evans
Username anitorious
Uploaded December 27, 2022
Rating 3
Size 3,838 Kb
Views 8,096
Do you need developer help for 3D Interface?

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!

Chris Evans (anitorious) Script Codes
Name
A Forked Sky Full of Stars - Canvas Adaptation, Credit to JLNLJN
CSS Grid Sandbox
Button with Progress Indicator
Single Field List Filter
Profile Cards
CSS Coupon
Animated Button - Material
Dashboard Widgets
Dashboard Module Management
CSS Drawing - The Great Sandwhich Chef
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!