Boxes
How do I make an boxes?
Messing with 3d boxes 2nd try. What is a boxes? How do you make a boxes? This script and codes were developed by James on 16 January 2023, Monday.
Boxes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>boxes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="shelf">
<div id="info">
</div> <section class="container"> <div class="case show-title" onclick="toggleShelf(this)" onmouseover="inRange(this)" onmouseout="outRange(this)"> <figure class="title"><img src="https://h3local.com/movies/images/coverart/300-2007-title.png" width="31px" height="401px"></figure> <figure class="opening"></figure> <figure class="front"><img src="https://h3local.com/movies/images/coverart/300-2007-front.png" height="401px" width="283px"></figure> <figure class="back"><img src="https://h3local.com/movies/images/coverart/300-2007-back.png" width="283px" height="401px"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div>
</section>
<section class="container"> <div class="case show-title" onclick="toggleShelf(this)" onmouseover="inRange(this)" onmouseout="outRange(this)"> <figure class="title"><img src="https://h3local.com/movies/images/coverart/Batman-Begins-2005-title.png" width="31px" height="401px"></figure> <figure class="opening"></figure> <figure class="front"><img src="https://h3local.com/movies/images/coverart/Batman-Begins-2005-front.png" height="401px" width="283px"></figure> <figure class="back"><img src="https://h3local.com/movies/images/coverart/Batman-Begins-2005-back.png" width="283px" height="401px"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div>
</section>
</div>
</div> <script src="js/index.js"></script>
</body>
</html>
Boxes - Script Codes CSS Codes
#shelf { margin: auto; position: fixed; width: 80%; left: 20%; top: 10%;
}
#info { margin: auto; padding: 0%; background-color: #222222; opacity: 0.5; display: none; position: fixed; vertical-align: middle; width: 80%; height: 80%; top: 10%; left: 10%;
}
.container { margin: auto; width: 31px; height: 401px; position: relative; float: left; perspective: 1200px; border: 1px solid blue;
}
.case { margin: 0; padding: 0; width: 100%; height: 100%; disply: block; position: absolute; transition: transform 1500ms; transform-origin: center bottom; transform-style: preserve-3d;
}
figure { margin: 0; padding: 0; position: absolute;
}
.case .title,
.case .opening { width: 31px; height: 401px; background-color: black;
}
.case .front,
.case .back { width: 283px; height: 401px; left: -126px; background-color: black;
}
.case .top,
.case .bottom { width: 31px; height: 283px; top: 59px; background-color: black;
}
.title { transform: rotateY( 0deg ) translateZ( 142px ); }
.opening { transform: rotateY( -180deg ) translateZ( 142px ); }
.front { transform: rotateY( 90deg ) translateZ( 16px ); }
.back { transform: rotateY( -90deg ) translateZ( 16px ); }
.top { transform: rotateX( 90deg ) translateZ( 200px ); }
.bottom { transform: rotateX( -90deg ) translateZ( 200px ); }
.case.show-title { transform: translateZ( -142px ) rotateY( 0deg );
}
.case.show-title-fast { transition: transform 500ms; transform: translateZ( -142px ) rotateY( 0deg ); }
.case.show-title-tilt { transition: transform 500ms; transform: translateZ( -142px ) rotateX( -20deg );
}
.case.show-title-focus { transform: translateZ( 142px ) rotateY( 0deg );
}
.case.show-back { transform: translateZ( 142px ) rotateY( 90deg ); }
.case.show-front { transform: translateZ( 142px ) rotateY( -90deg );}
Boxes - Script Codes JS Codes
var caseState = 0;
function inRange(obj){ if (caseState == 0){ obj.className = "case show-title-tilt"; } else if (caseState == 1){ obj.className = "case show-back"; }
}
function outRange(obj){ if (caseState == 0){ obj.className = "case show-title-fast"; } else if (caseState == 1){ obj.className = "case show-front"; }
}
function toggleShelf(obj){ if (caseState == 0) { caseState = 2; obj.parentNode.style.zIndex = "2"; obj.className = "case show-title-focus"; setTimeout(function(){ obj.className = "case show-front";}, 1500 ); setTimeout(function(){ caseState = 1; document.getElementById("info").style.display = "block"; document.getElementById("info").style.zIndex = "1"; }, 3000 ); } else if (caseState == 1){ caseState = 2; obj.className = "case show-title-focus"; setTimeout(function(){ obj.className = "case show-title"}, 1500 ); setTimeout(function(){ caseState = 0; document.getElementById("info").style.display = "none"; document.getElementById("info").style.zIndex = "initial"; obj.parentNode.style.zIndex = "initial"; obj.style.zIndex = "initial"; }, 3000 ); }
}
Developer | James |
Username | h3l1um |
Uploaded | January 16, 2023 |
Rating | 3 |
Size | 2,563 Kb |
Views | 4,048 |
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!
Name | Size |
Boxes p2 | 2,562 Kb |
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!
Name | Username | Size |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
SVG Playground | Roygwells | 1,834 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Responsive slide | Thorien | 2,400 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
-2 base | Kozanecki_p | 1,641 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
After America | Jonathangarner | 2,686 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!