Zen cube
How do I make an zen cube?
What is a zen cube? How do you make a zen cube? This script and codes were developed by Elena on 17 December 2022, Saturday.
Zen cube - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Zen cube</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!--Thank YOU yoksel-->
<html lang="en">
<head> <meta charset="UTF-8"> <title>Dzen cube 3d</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic|Marck+Script|Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Thank YOU http://css.yoksel.ru/ *** --> <style> #cube-box { min-height: 500px; height: 100%; margin: 0 auto; background: url(https://integrationtraining.co.uk/blog/wp-content/uploads/2011/05/Zen_business.jpg) no-repeat; background-position: 100% 100%; perspective-origin: center -135px; perspective: 500px; } .box { width: 270px; height: 270px; margin: 12% 0 7% 27%; transform-style: preserve-3d; animation: rotate 27s infinite ease-in; } [class*="wall-"] { position: absolute; width: 210px; height: 210px; background: linear-gradient( #FFFFFF, transparent 2px ), linear-gradient( 90deg, #FFFFFF, rgba(93, 232, 39, 0.72) 2px ); background-size: 70px 70px; background-position: center center; border: 1px solid #FFFFFF; } .wall-1 { transform: translateX(-105px) rotateY(90deg); } .wall-2 { transform: translateY(-105px) rotateX(90deg); } .wall-3 { transform: translateZ(-105px); } .wall-4 { transform: translateY(105px) rotateX(90deg); } .wall-5 { transform: translateZ(105px); } .wall-6 { transform: translateX(105px) rotateY(90deg); } @keyframes rotate { 100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } </style>
</head>
<body> <div id="cube-box"> <div class="box"> <div class="wall-1"></div> <div class="wall-2"></div> <div class="wall-3"></div> <div class="wall-4"></div> <div class="wall-5"></div> <div class="wall-6"></div> </div> </div> <section style="position: absolute; top: 25%; left: 70%; "> <p style="font: 34px 'Marck Script'; color: #333333; text-align: center; "> up and running! </p> </section>
</body>
</html>
</body>
</html>
Developer | Elena |
Username | semenchenko |
Uploaded | December 17, 2022 |
Rating | 3 |
Size | 2,083 Kb |
Views | 12,144 |
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 |
Responsive HTML Email template | 4,246 Kb |
3d css cube | 4,578 Kb |
SVG WORD Path | 3,461 Kb |
A Pen by Elena | 3,573 Kb |
Css piramide | 2,681 Kb |
Walking skeleton only css | 9,064 Kb |
Modal | 9,533 Kb |
Fish 2d game only CSS | 9,489 Kb |
Animation countdown | 3,081 Kb |
Business card mockup | 4,866 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 |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
Search field | Jamesbarnett | 2,100 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Calculator | Rzencoder | 4,572 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Typefaces with descriptions | Megandoty | 2,944 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Z-index demo | Kblh | 1,534 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 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!