3D box

Developer
Sander
Size
2,899 Kb
Views
8,096
  1. 3D box Previews
  2. 3D box HTML Codes
  3. 3D box CSS Codes
  4. 3D box JS Codes

How do I make an 3d box?

Under construction. What is a 3d box? How do you make a 3d box? This script and codes were developed by Sander on 18 December 2022, Sunday.

3D box Previews
IQ Test

3D box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D box</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div class="cube">	<div class="plane back">	</div>	<div class="plane top">	</div>	<div class="plane bottom">	</div>	<div class="plane left">	</div>	<div class="plane right">	</div>	<div class="plane front">	</div>	</div>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D box - Script Codes CSS Codes

/* ALGEMENE OPMAAK * =========================================================================================== */
* {	padding: 0;	margin: 0;
}
html {	background: #E0E0E0;
}
body {	font-family: 'Roboto Slab', serif;	font-size: 14px;	font-weight: 300;	line-height: 24px;	color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {	font-weight: 700;
}
h1 {	font-size: 26px;	font-weight: 100;	line-height: 30px;
}
h2 {	font-size: 16px;	font-weight: 100;	line-height: 24px;
}
p {
}
a,
a:link,
a:visited,
a:active {	color:#0000FF;
}
a:hover {	color: #FF0000;
}
strong {	font-weight: bold;
}
em {	font-style: italic;
}
/* PAGINA INDELING * =========================================================================================== */
.wrapper {	width: 300px;	height: 300px;	margin: 50px auto;	perspective: 1600px;	perspective-origin: 50% -240px;	-webkit-perspective: 1600px;	-webkit-perspective-origin: 50% -240px;
}
.cube {	transform-style: preserve-3d;	-webkit-transform-style: preserve-3d;
}
.cube.active {	transform: rotateY(90deg);	-webkit-transform: rotateY(90deg);	animation: active 0.5s 1 linear;	-webkit-animation: active 0.5s 1 linear;
}
.cube.nonActive {	transform: rotateY(0deg);	-webkit-transform: rotateY(0deg);	animation: nonActive 0.5s 1 linear;	-webkit-animation: nonActive 0.5s 1 linear;
}
.plane {	display: block;	position: absolute;	width: 300px;	height: 300px;	background-color: #ccff00;	opacity: 0.9;	transform-origin: 50% 50% 0;	-webkit-transform-origin: 50% 50% 0;
}
.plane:before,
.plane:after {	content: "";	display: block;	position: absolute;	width: 100%;	height: 100%;	opacity: 0;	z-index: 25;
}
.plane:before {	background: radial-gradient(top left, rgba(0, 0, 0, 0.5), #000000); background: -webkit-radial-gradient(top left, rgba(0, 0, 0, 0.5), #000000);
}
.plane:after { background: radial-gradient(top right, rgba(0, 0, 0, 0.5), #000000);	background: -webkit-radial-gradient(top right, rgba(0, 0, 0, 0.5), #000000);
}
.front {	transform: translateZ(150px);	-webkit-transform: translateZ(150px);
}
.nonActive .front:before {	animation: frontShading2 0.5s 1 linear;	-webkit-animation: frontShading2 0.5s 1 linear;
}
.active .front:before {	animation: frontShading1 0.5s 1 linear;	-webkit-animation: frontShading1 0.5s 1 linear;
}
.back {	transform: rotateY(180deg) translateZ(150px);	-webkit-transform: rotateY(180deg) translateZ(150px);
}
.top {	transform: rotateX(90deg) translateZ(150px);	-webkit-transform: rotateX(90deg) translateZ(150px); overflow: hidden;
}
.top:after { opacity: 0.25; width: 200%; height: 200%; margin-left: -50%; margin-top: -50%; background: radial-gradient(bottom, rgba(0, 0, 0, 0), #000000); background: -webkit-radial-gradient(bottom, rgba(0, 0, 0, 0), #000000);
}
.bottom {	transform: rotateX(-90deg) translateZ(150px);	-webkit-transform: rotateX(-90deg) translateZ(150px); box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
}
.left {	transform: rotateY(-90deg) translateZ(150px);	-webkit-transform: rotateY(-90deg) translateZ(150px);
}
.nonActive .left:before {	animation: leftShading2 0.5s 1 linear;	-webkit-animation: leftShading2 0.5s 1 linear;
}
.active .left:before {	animation: frontShading1 0.5s 1 linear;	-webkit-animation: leftShading1 0.5s 1 linear;
}
.right {	transform: rotateY(90deg) translateZ(150px);	-webkit-transform: rotateY(90deg) translateZ(150px);
}
/* PLANE COLORS */
.front,
.back {	background: #CCF600;
}
.top,
.bottom {	background: #E40045;
}
.left,
.right {	background: #530FAD;
}
.front,
.back,
.top,
.bottom,
.left,
.right { background: #d0d0d0;
}
/* ANIMATIONS */
@keyframes active {	0% {	transform: rotateY(0deg);	}	100% {	transform: rotateY(90deg);	}
}
@-webkit-keyframes active {	0% {	-webkit-transform: rotateY(0deg);	}	100% {	-webkit-transform: rotateY(90deg);	}
}
@keyframes nonActive {	0% {	transform: rotateY(90deg);	}	100% {	transform: rotateY(0deg);	}
}
@-webkit-keyframes nonActive {	0% {	-webkit-transform: rotateY(90deg);	}	100% {	-webkit-transform: rotateY(0deg);	}
}
@keyFrames frontShading1 {	0% {	opacity: 0;	}	100% {	opacity: 0.25;	}
}
@-webkit-keyFrames frontShading1 {	0% {	opacity: 0;	}	100% {	opacity: 0.25;	}
}
@keyFrames frontShading2 {	0% {	opacity: 0.25;	}	100% {	opacity: 0;	}
}
@-webkit-keyFrames frontShading2 {	0% {	opacity: 0.25;	}	100% {	opacity: 0;	}
}
@keyFrames leftShading1 {	0% {	opacity: 0.25;	}	100% {	opacity: 0;	}
}
@-webkit-keyFrames leftShading1 {	0% {	opacity: 0.25;	}	100% {	opacity: 0;	}
}
@keyFrames leftShading2 {	0% {	opacity: 0;	}	100% {	opacity: 0.25;	}
}
@-webkit-keyFrames leftShading2 {	0% {	opacity: 0;	}	100% {	opacity: 0.25;	}
}
@keyframes rotateTop1 { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(90deg); }
}
@-webkit-keyframes rotateTop1 { 0% { -webkit-transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(90deg); }
}

3D box - Script Codes JS Codes

$(document).ready(function(){	$('.cube').click(function(){	if($(this).hasClass('active')) {	$(this).removeClass('active');	$(this).addClass('nonActive');	} else {	$(this).removeClass('nonActive');	$(this).addClass('active');	}	});
});
3D box - Script Codes
3D box - Script Codes
Home Page Home
Developer Sander
Username skeurentjes
Uploaded December 18, 2022
Rating 3
Size 2,899 Kb
Views 8,096
Do you need developer help for 3D box?

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!

Sander (skeurentjes) Script Codes
Name
Horizontal navigation
Button hover effects
Parallax scrolling background
Search field
Sidenavigation
Dropdown navigation
Text 3d effct
Simple gallery
Pure CSS dropdown navigation
Spinning loader
Create amazing SEO content 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!