CSS3 Jack in a Box

Developer
Prashant Sani
Size
2,578 Kb
Views
30,360
  1. CSS3 Jack in a Box Previews
  2. CSS3 Jack in a Box HTML Codes
  3. CSS3 Jack in a Box CSS Codes

How do I make an css3 jack in a box?

CSS3 Experiment showing Jack in the box (pls hover to see the effect). What is a css3 jack in a box? How do you make a css3 jack in a box? This script and codes were developed by Prashant Sani on 15 November 2022, Tuesday.

CSS3 Jack in a Box Previews
IQ Test

CSS3 Jack in a Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Jack in a Box </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="jackInBox"> <div class="box"> <div class="side side1"></div> <div class="side side2"></div> <div class="side side3"></div> <div class="side side4"></div> <div class="side side5"></div> <div class="spring"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="jackHead"> <span class="jackEyes jackEyeLeft"></span> <span class="jackEyes jackEyeRight"></span> <span class="jackSmile"></span> <span class="jackHat"></span> </div> </div>
</div>
</body>
</html>

CSS3 Jack in a Box - Script Codes CSS Codes

*{ margin: 0; padding: 0;
}
html, body{ width: 100%; height: 100%; position: relative; background-color: #f8f8f8; overflow: hidden;
}
.jackInBox{ -webkit-perspective: 800px; -moz-perspective: 800px; -ms-perspective: 800px; -o-perspective: 800px; perspective: 800px;
}
.box{ position: relative; top: 200px; width: 100px; height: 100px; margin: 0 auto; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;
}
.side,
.box div,
.jackHead span,
.jackSmile:after{ position: absolute;
}
.side{ top: 0; left: 0; width: 100px; height: 100px;
}
.side a{ display: block; width: 100%; height: 100%;
}
.side1{ background-color: #71cab0; -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; -webkit-transition: all 0.15s 0.1s linear; -moz-transition: all 0.15s 0.1s linear; -ms-transition: all 0.15s 0.1s linear; -o-transition: all 0.15s 0.1s linear; transition: all 0.15s 0.1s linear; -webkit-transform: rotateX(90deg) translateY(-50px) translateZ(0); -moz-transform: rotateX(90deg) translateY(-50px) translateZ(0); -ms-transform: rotateX(90deg) translateY(-50px) translateZ(0); -o-transform: rotateX(90deg) translateY(-50px) translateZ(0); transform: rotateX(90deg) translateY(-50px) translateZ(0);
}
.box:hover .side1{ -webkit-transform: rotateX(180deg) translateY(0) translateZ(50px); -moz-transform: rotateX(180deg) translateY(0) translateZ(50px); -ms-transform: rotateX(180deg) translateY(0) translateZ(50px); -o-transform: rotateX(180deg) translateY(0) translateZ(50px); transform: rotateX(180deg) translateY(0) translateZ(50px);
}
.side2{ background-color: #2e9d89; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); -ms-transform: translateZ(50px); -o-transform: translateZ(50px); transform: translateZ(50px);
}
.side2{ z-index:100
}
.side3{ background-color: #e1cfa1; -webkit-transform: rotateY(90deg) translateZ(50px); -moz-transform: rotateY(90deg) translateZ(50px); -ms-transform: rotateY(90deg) translateZ(50px); -o-transform: rotateY(90deg) translateZ(50px); transform: rotateY(90deg) translateZ(50px);
}
.side4{ background-color: #eddeb8; -webkit-transform: rotateY(180deg) translateZ(50px); -moz-transform: rotateY(180deg) translateZ(50px); -ms-transform: rotateY(180deg) translateZ(50px); -o-transform: rotateY(180deg) translateZ(50px); transform: rotateY(180deg) translateZ(50px);
}
.side5{ background-color: #e1cfa1; -webkit-transform: rotateY(-90deg) translateZ(50px); -moz-transform: rotateY(-90deg) translateZ(50px); -ms-transform: rotateY(-90deg) translateZ(50px); -o-transform: rotateY(-90deg) translateZ(50px); transform: rotateY(-90deg) translateZ(50px);
}
.spring{ bottom: 0; left: 50%; margin-left: -10px; width: 20px; -webkit-transform: scaleY(0.1); -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -o-transform: scaleY(0.1); transform: scaleY(0.1); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom;
}
.box:hover .spring{ -webkit-animation: springAnim1 0.8s linear forwards; -moz-animation: springAnim1 0.8s linear forwards; animation: springAnim1 0.8s linear forwards;
}
@-webkit-keyframes springAnim1 { 0% { -webkit-transform: scaleY(.1); } 50% { -webkit-transform: scaleY(1.3); } 70% { -webkit-transform: scaleY(1); } 100% { -webkit-transform: scaleY(1.1); }
}
@-moz-keyframes springAnim1 { 0% { -moz-transform: scaleY(.1); } 50% { -moz-transform: scaleY(1.3); } 70% { -moz-transform: scaleY(1); } 100% { -moz-transform: scaleY(1.1); }
}
@keyframes springAnim1 { 0% { transform: scaleY(.1); } 50% { transform: scaleY(1.3); } 70% { transform: scaleY(1); } 100% { transform: scaleY(1.1); }
}
.spring span{ display: block;
}
.spring span:before,
.spring span:after{ content: ""; width: 10px; height: 0; display: block; border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.spring span:before{ border-bottom: 5px solid #333;
}
.spring span:after{ border-top: 5px solid #333;
}
.jackHead{ top: 46px; left: 29px; width: 40px; height: 40px; border-radius: 21px; border: 1px solid #333; background-color: #FFFDCA;
}
.jackEyes{ top: 13px; width: 5px; height: 5px; border-radius: 5px; background-color: #333;
}
.jackEyeLeft{ left: 10px;
}
.jackEyeRight{ right: 10px;
}
.jackSmile{ width: 19px; height: 6px; top: 27px; left: 11px; overflow: hidden;
}
.jackSmile:after{ content: ""; width: 20px; height: 25px; border: 1px solid #333; border-radius: 30px; top: -22px; left: -2px;
}
.box:hover .jackHead{ -webkit-animation: jackHeadAnim 0.8s linear forwards; -moz-animation: jackHeadAnim 0.8s linear forwards; animation: jackHeadAnim 0.8s linear forwards;
}
@-webkit-keyframes jackHeadAnim { 0% { top: 43px; } 50% { top: -78px; } 70% { top: -58px; } 100% { top: -71px; }
}
@-moz-keyframes jackHeadAnim { 0% { top: 43px; } 50% { top: -78px; } 70% { top: -58px; } 100% { top: -71px; }
}
@keyframes jackHeadAnim { 0% { top: -20px; } 50% { top: -60px; } 70% { top: -63px; } 100% { top: -58px; }
}
.jackHat{ top: -20px; left: 5px; width: 3px; height: 0; border-radius: 2px; border-right: 14px solid transparent; border-left: 13px solid transparent; border-bottom: 26px solid #333;
}
CSS3 Jack in a Box - Script Codes
CSS3 Jack in a Box - Script Codes
Home Page Home
Developer Prashant Sani
Username Prashantsani
Uploaded November 15, 2022
Rating 3
Size 2,578 Kb
Views 30,360
Do you need developer help for CSS3 Jack in a 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!

Prashant Sani (Prashantsani) Script Codes
Name
Flower Petal Animation
CSS3 Animating Analogue Tower
Digital Christmas Tree
A Pen by Prashant Sani
CSS Off Entry
Vintage Television Set Noise Effect in CSS3
Christ the Redeemer
Create amazing video scripts 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!