Bouncy Box

Developer
Size
3,423 Kb
Views
12,144

How do I make an bouncy box?

What is a bouncy box? How do you make a bouncy box? This script and codes were developed by John Heiner on 14 November 2022, Monday.

Bouncy Box Previews

Bouncy Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bouncy Box</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap -center"> <div class="shadow"></div> <div class="cube-wrap"> <div class="cube"> <div class="front wall"></div> <div class="back wall"></div> <div class="right wall"></div> <div class="left wall"></div> <div class="front-right wall"></div> <div class="front-left wall"></div> <div class="back-right wall"></div> <div class="back-left wall"></div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Bouncy Box - Script Codes CSS Codes

html,
body { height: 100%;
}
body { background: #36373c;
}
.wrap { bottom: 100px; margin-left: -50px; position: absolute; width: 100px;
}
.wrap.-center { left: 50%;
}
.wrap .cube,
.wrap .cube-wrap,
.wrap .shadow { left: 0; margin: auto; position: absolute; right: 0; top: 0;
}
.wrap .shadow { -webkit-animation: shadow 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate; -moz-animation: shadow 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate; animation: shadow 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate; bottom: -90px; height: 32px; width: 32px;
}
.wrap .cube-wrap { cursor: pointer; -webkit-animation: bounce 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate; -moz-animation: bounce 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate; animation: bounce 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}
.wrap .cube { width: 32px; height: 32px; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg); -o-transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg); transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg);
}
.wrap .cube .wall { width: 32px; height: 32px; position: absolute; transition: all 1s ease-out; backface-visibility: hidden;
}
.wrap .cube .front { background: #f8f8fc; -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) rotateX(90deg); -moz-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) rotateX(90deg); -ms-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) rotateX(90deg); -o-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) rotateX(90deg); transform: rotateX(0deg) rotateY(0deg) translateZ(16px) rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; height: 50%; z-index: 1;
}
.wrap .cube .right { height: 32px; background: #f8f8fc; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateX(16px) rotateY(90deg) rotateX(90deg); -moz-transform: translateX(16px) rotateY(90deg) rotateX(90deg); -ms-transform: translateX(16px) rotateY(90deg) rotateX(90deg); -o-transform: translateX(16px) rotateY(90deg) rotateX(90deg); transform: translateX(16px) rotateY(90deg) rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; height: 50%; z-index: 1;
}
.wrap .cube .back { background: #f8f8fc; -webkit-transform: rotateY(180deg) translateZ(16px) rotateX(90deg); -moz-transform: rotateY(180deg) translateZ(16px) rotateX(90deg); -ms-transform: rotateY(180deg) translateZ(16px) rotateX(90deg); -o-transform: rotateY(180deg) translateZ(16px) rotateX(90deg); transform: rotateY(180deg) translateZ(16px) rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; height: 50%;
}
.wrap .cube .left { background: #f8f8fc; -webkit-transform: translateX(-16px) rotateY(-90deg) rotateX(90deg); -moz-transform: translateX(-16px) rotateY(-90deg) rotateX(90deg); -ms-transform: translateX(-16px) rotateY(-90deg) rotateX(90deg); -o-transform: translateX(-16px) rotateY(-90deg) rotateX(90deg); transform: translateX(-16px) rotateY(-90deg) rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; height: 50%;
}
.wrap .cube .front-left { background: #d1d5e9; height: 32px; -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) translateY(16px); -moz-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) translateY(16px); -ms-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) translateY(16px); -o-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) translateY(16px); transform: rotateX(0deg) rotateY(0deg) translateZ(16px) translateY(16px); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
.wrap .cube .front-right { background: #96a0ce; height: 32px; -webkit-transform: translateX(16px) rotateY(90deg) translateY(16px); -moz-transform: translateX(16px) rotateY(90deg) translateY(16px); -ms-transform: translateX(16px) rotateY(90deg) translateY(16px); -o-transform: translateX(16px) rotateY(90deg) translateY(16px); transform: translateX(16px) rotateY(90deg) translateY(16px); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
.wrap .cube .back-left { background: #b0c2d6; height: 32px; -webkit-transform: rotateX(0deg) translateX(-16px) rotateY(-90deg) translateY(16px); -moz-transform: rotateX(0deg) translateX(-16px) rotateY(-90deg) translateY(16px); -ms-transform: rotateX(0deg) translateX(-16px) rotateY(-90deg) translateY(16px); -o-transform: rotateX(0deg) translateX(-16px) rotateY(-90deg) translateY(16px); transform: rotateX(0deg) translateX(-16px) rotateY(-90deg) translateY(16px); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
.wrap .cube .back-right { background: #8a9fb4; height: 32px; -webkit-transform: rotateX(0deg) rotateY(180deg) translateZ(16px) translateY(16px); -moz-transform: rotateX(0deg) rotateY(180deg) translateZ(16px) translateY(16px); -ms-transform: rotateX(0deg) rotateY(180deg) translateZ(16px) translateY(16px); -o-transform: rotateX(0deg) rotateY(180deg) translateZ(16px) translateY(16px); transform: rotateX(0deg) rotateY(180deg) translateZ(16px) translateY(16px); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
@-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(-25px); }
}
@-moz-keyframes bounce { 0% { -moz-transform: translateY(0); } 100% { -moz-transform: translateY(-25px); }
}
@keyframes bounce { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-25px); -moz-transform: translateY(-25px); -ms-transform: translateY(-25px); -o-transform: translateY(-25px); transform: translateY(-25px); }
}
@-webkit-keyframes shadow { 0% { background: rgba(0, 0, 0, 0.5); -webkit-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 0 0 0px rgba(0, 0, 0, 0.6); } 100% { background: rgba(0, 0, 0, 0.15); -webkit-transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
}
@-moz-keyframes shadow { 0% { background: rgba(0, 0, 0, 0.5); -moz-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 0 0 0px rgba(0, 0, 0, 0.6); } 100% { background: rgba(0, 0, 0, 0.15); -moz-transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
}
@keyframes shadow { 0% { background: rgba(0, 0, 0, 0.5); -webkit-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); -moz-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); -ms-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); -o-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 0 0 0px rgba(0, 0, 0, 0.6); } 100% { background: rgba(0, 0, 0, 0.15); -webkit-transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); -moz-transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); -ms-transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); -o-transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
}
Bouncy Box - Script Codes
Bouncy Box - Script Codes
Home Page Home
Developer John Heiner
Username johnheiner
Uploaded November 14, 2022
Rating 4.5
Size 3,423 Kb
Views 12,144
Do you need developer help for Bouncy 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!

John Heiner (johnheiner) Script Codes
Create amazing sales emails 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!