3d box
How do I make an 3d box?
Animated 3d box/cube written in html/css. Based it on a tutorial from David Walsh. http://davidwalsh.name/css-cube. What is a 3d box? How do you make a 3d box? This script and codes were developed by Cliff Pyles on 15 January 2023, Sunday.
3d box Previews
3d box - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3d box</title> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #F0F1F1;
}
.page { color: #222; display: flex; align-items: center; align-content: center; justify-content: center; height: 100vh; text-align: center;
}
.container { margin-top: -200px;
}
.box-wrapper { perspective: 800px; perspective-origin: 50% 100px;
}
.box-faces { position: relative; width: 200px; transform-style: preserve-3d;
}
.box-faces p { padding: 40px 0;
}
.box-face { outline: 1px solid #999; position: absolute; width: 200px; height: 200px; opacity: 0.98; box-shadow: inset 0px 0px 100px #555;
}
.box-face--is-back { transform: translateZ(-100px) rotateY(180deg); background-color: #eee;
}
.box-face--is-right { transform: rotateY(-270deg) translateX(100px); transform-origin: top right; background-color: #ddd;
}
.box-face--is-left { transform: rotateY(270deg) translateX(-100px); transform-origin: center left; background-color: #ddd;
}
.box-face--is-top { transform: rotateX(-90deg) translateY(-100px); transform-origin: top center; background-color: #fafafa;
}
.box-face--is-bottom { transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; background-color: #bbb;
}
.box-face--is-front { transform: translateZ(100px); background-color: #eee;
}
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); }
}
.box-faces, .shadow { animation: spin 15s infinite linear;
}
.icon-rocket { color: #4F5D75;
}
.shadow-wrapper { perspective: 800px; perspective-origin: 50% 100px; /* -webkit-perspective: 800px; -webkit-perspective-origin: 50% 100px;*/
}
.shadow { position: relative; width: 200px; transform-style: preserve-3d;
}
.shadow div { position: absolute; width: 200px; height: 200px; top: 0px; opacity: 0.98; box-shadow: 0px 0px 100px #000; transform: rotateX(90deg) translateY(100px); transform-origin: bottom center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- JJ -->
<div class="page"> <div class="container"> <div class="shadow-wrapper"> <div class="shadow"> <div> </div> </div> </div> <div class="box-wrapper"> <div class="box-faces"> <div class="box-face box-face--is-front"> <p> <i class="icon-rocket icon-4x"></i> </p> </div> <div class="box-face box-face--is-back"> <p> <i class="icon-rocket icon-4x"></i> </p> </div> <div class="box-face box-face--is-top"> </div> <div class="box-face box-face--is-bottom"> </div> <div class="box-face box-face--is-left"> <p> <i class="icon-rocket icon-4x"></i> </p> </div> <div class="box-face box-face--is-right"> <p> <i class="icon-rocket icon-4x"></i> </p> </div> </div><!-- end of .box --> </div><!-- end of .box-wrapper --> </div><!-- /.container -->
</div><!-- /.page -->
<!-- SDG --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
3d box - Script Codes CSS Codes
body { background-color: #F0F1F1;
}
.page { color: #222; display: flex; align-items: center; align-content: center; justify-content: center; height: 100vh; text-align: center;
}
.container { margin-top: -200px;
}
.box-wrapper { perspective: 800px; perspective-origin: 50% 100px;
}
.box-faces { position: relative; width: 200px; transform-style: preserve-3d;
}
.box-faces p { padding: 40px 0;
}
.box-face { outline: 1px solid #999; position: absolute; width: 200px; height: 200px; opacity: 0.98; box-shadow: inset 0px 0px 100px #555;
}
.box-face--is-back { transform: translateZ(-100px) rotateY(180deg); background-color: #eee;
}
.box-face--is-right { transform: rotateY(-270deg) translateX(100px); transform-origin: top right; background-color: #ddd;
}
.box-face--is-left { transform: rotateY(270deg) translateX(-100px); transform-origin: center left; background-color: #ddd;
}
.box-face--is-top { transform: rotateX(-90deg) translateY(-100px); transform-origin: top center; background-color: #fafafa;
}
.box-face--is-bottom { transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; background-color: #bbb;
}
.box-face--is-front { transform: translateZ(100px); background-color: #eee;
}
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); }
}
.box-faces, .shadow { animation: spin 15s infinite linear;
}
.icon-rocket { color: #4F5D75;
}
.shadow-wrapper { perspective: 800px; perspective-origin: 50% 100px; /* -webkit-perspective: 800px; -webkit-perspective-origin: 50% 100px;*/
}
.shadow { position: relative; width: 200px; transform-style: preserve-3d;
}
.shadow div { position: absolute; width: 200px; height: 200px; top: 0px; opacity: 0.98; box-shadow: 0px 0px 100px #000; transform: rotateX(90deg) translateY(100px); transform-origin: bottom center;
}
| Developer | Cliff Pyles |
| Username | cliffpyles |
| Uploaded | January 15, 2023 |
| Rating | 4.5 |
| Size | 3,687 Kb |
| Views | 4,048 |
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!
Cliff Pyles (cliffpyles) Script Codes
| Name | Size |
| Layout with Fixed Sidebar | 3,306 Kb |
| Modal - Web Component | 2,586 Kb |
| Coming Soon | 3,580 Kb |
| Hexadecimal Color Previewer | 3,898 Kb |
| Circular Progress Bar | 3,939 Kb |
| Two Column Flexbox Layout | 2,282 Kb |
| Drag and Drop Tasks | 5,765 Kb |
| Circle Navigation | 2,931 Kb |
| Content Changer | 4,538 Kb |
| Multi-Height Grid Layout | 6,512 Kb |
Create amazing web 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!
Similar Scripts & Codes
| Name | Username | Size |
| Improve | Gavra | 1,652 Kb |
| Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
| Pattern lab logo | TimPietrusky | 3,666 Kb |
| Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
| Polygon Logo in CSS | Kai | 3,412 Kb |
| Portfolio Page | HuffmanJ25 | 5,240 Kb |
| Simple Weather App | Cmwebby | 0 Kb |
| C.Rowe Button | Brownerd | 2,473 Kb |
| Loading animation with css | Icebob | 2,947 Kb |
| Main page display | BarryKe | 4,562 Kb |
Do you want hide your ip address?
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!