box.min.css

.box-bounced{--width:120px;--height:120px;--length:120px;--color1:#f1e767;--color2:#feb645;--color3:#7c5620;--color4:#8e6425;--color5:#020201;--duration:0.3s;--rotateX:-23deg;--rotateY:45deg;--bounce-down-distance:-400px;-webkit-perspective:2000px;perspective:2000px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.box-jello{position:relative;width:var(--width);height:var(--height);left:calc(var(--width)/ 2);top:calc(var(--height)/ 2);-webkit-transform:translate(-50%,-50%) scale(.999,.999);-ms-transform:translate(-50%,-50%) scale(.999,.999);transform:translate(-50%,-50%) scale(.999,.999);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.box-cube{position:relative;width:100%;height:100%;--halfX:calc(var(--width) / 2);--halfY:calc(var(--height) / 2);--halfZ:calc(var(--length) / 2);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(var(--rotateX)) rotateY(var(--rotateY));transform:rotateX(var(--rotateX)) rotateY(var(--rotateY))}.box-side{position:absolute;background:-webkit-gradient(linear,right top,left top,from(var(--color1)),to(var(--color2)));background:-o-linear-gradient(right,var(--color1) 0,var(--color2) 100%);background:linear-gradient(to left,var(--color1) 0,var(--color2) 100%)}.box-front{width:100%;height:100%;-webkit-transform:translateZ(var(--halfZ));transform:translateZ(var(--halfZ));overflow:hidden}.box-back{width:100%;height:100%;background:-o-linear-gradient(45deg,var(--color5) 0,var(--color3) 50%,var(--color4) 51%,var(--color1) 100%);background:linear-gradient(45deg,var(--color5) 0,var(--color3) 50%,var(--color4) 51%,var(--color1) 100%);-webkit-transform:rotateY(180deg) translateZ(var(--halfZ));transform:rotateY(180deg) translateZ(var(--halfZ))}.box-left{width:var(--length);height:100%;left:50%;-webkit-transform:rotateY(-90deg) translate3d(-50%,0,var(--halfX));transform:rotateY(-90deg) translate3d(-50%,0,var(--halfX));-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.box-right{width:var(--length);height:100%;left:50%;-webkit-transform:rotateY(90deg) translate3d(-50%,0,var(--halfX));transform:rotateY(90deg) translate3d(-50%,0,var(--halfX));-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center;background:-webkit-gradient(linear,right top,left top,from(var(--color5)),color-stop(1%,var(--color3)),to(var(--color2)));background:-o-linear-gradient(right,var(--color5) 0,var(--color3) 1%,var(--color2) 100%);background:linear-gradient(to left,var(--color5) 0,var(--color3) 1%,var(--color2) 100%)}.box-bottom{width:100%;height:var(--length);-webkit-transform:rotateX(-90deg) translate3d(0,-50%,var(--halfY));transform:rotateX(-90deg) translate3d(0,-50%,var(--halfY));-webkit-transform-origin:top right;-ms-transform-origin:top right;transform-origin:top right;top:50%}.box-cover{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;background:0 0;width:100%;height:var(--length);-webkit-transform:rotateX(90deg) translate3d(0,-50%,var(--halfY));transform:rotateX(90deg) translate3d(0,-50%,var(--halfY));-webkit-transform-origin:top right;-ms-transform-origin:top right;transform-origin:top right;top:50%}.box-cover-side{position:absolute;background:-webkit-gradient(linear,left top,left bottom,from(var(--color1)),to(var(--color2)));background:-o-linear-gradient(top,var(--color1) 0,var(--color2) 100%);background:linear-gradient(to bottom,var(--color1) 0,var(--color2) 100%);-webkit-animation-duration:calc(var(--duration) * 3);animation-duration:calc(var(--duration) * 3);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:calc(var(--duration) * 1.5);animation-delay:calc(var(--duration) * 1.5)}.box-cover-front{bottom:0;width:100%;height:var(--halfZ);max-height:var(--halfX);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;z-index:9;border-radius:4px 4px 0 0}.box-cover-back{width:100%;height:var(--halfZ);max-height:var(--halfX);-webkit-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top;z-index:9;border-radius:0 0 4px 4px}.box-cover-left{width:var(--halfZ);max-width:var(--halfX);height:100%;-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center;border-radius:0 4px 4px 0}.box-cover-right{right:0;width:var(--halfZ);max-width:var(--halfX);height:100%;-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center;border-radius:4px 0 0 4px}.box-label{position:absolute;z-index:9;width:20%;height:20%;min-width:30px;min-height:30px;bottom:10px;left:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 336 337'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='8' d='M4 179.86h152.5v152.5H4v-152.5z'/%3E%3Cpath fill='%23000' d='M34.29 213.52a62.66 62.66 0 007.03 24.4l7.03-10.96-2.03-.75-2.82-1 1.47-2.57 5.16-9.12H34.29zm21.59 0l-5.1 9 2.2.78 2.96 1.06-1.69 2.63-10.12 15.84c8.26 12.54 20.86 20.69 35.16 20.69 23.65 0 42.88-22.02 45-50H55.88z'/%3E%3Cpath fill='%23000' d='M74.29 258.51h10v45h-10v-45z'/%3E%3Cpath fill='%23000' d='M54.29 295.51h50v8h-50v-8z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='8' d='M179 4.86h152.5v152.5H179V4.86z'/%3E%3Cpath fill='%23000' d='M205.45 125.3h100v10h-100v-10zm17-75h16v70h-16v-70z'/%3E%3Cpath fill='%23000' d='M245.45 55.3h-30l7.5-12.5 7.5-12.5 7.5 12.5 7.5 12.5zm27-5h16v70h-16v-70z'/%3E%3Cpath fill='%23000' d='M295.45 55.3h-30l7.5-12.5 7.5-12.5 7.5 12.5 7.5 12.5z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='8' d='M179 179.86h152.5v152.5H179v-152.5z'/%3E%3Cpath fill='%23000' d='M257 215.88c-27.6 0-50 15.68-50 35 0-3.32 5.6-6 12.5-6s12.5 2.68 12.5 6c0-3.32 5.6-6 12.5-6s12.5 2.68 12.5 6c0-3.32 5.6-6 12.5-6s12.5 2.68 12.5 6c0-3.32 5.6-6 12.5-6s12.5 2.68 12.5 6c0-19.33-22.4-35-50-35z'/%3E%3Cpath fill='%23000' d='M253 205.88v90a4 4 0 11-8 0v-2h-8v2a12 12 0 1024 0v-90h-8z'/%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='8' d='M4 4.86h152.5v152.5H4V4.86z'/%3E%3Cpath fill='%23000' d='M60 44.36l20-15 20 15-20 15-20-15zm40 6.25L83 63.36v20l17-12.75v-20zm-40 0l17 12.75v20L60 70.61v-20z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M75 125.68v-15.29c0-8.35-11.4-20.54-18.78-29.08-2.02-2-5.66-2.77-7.58-.87-1.7 1.68-1.57 5.8-.22 7.86l7.44 11.18c1.25 2.12-1.8 3.84-3.63 1.57-9.52-12.9-12.13-15.51-12.13-20.7V59.3c0-3.03-2.22-5.94-5.06-5.94-2.7 0-5.04 2.8-5.04 5.43v40.68c0 5.27 16.65 21.22 16.65 28.65v5.24H75v-7.68zm10 0v-15.29c0-8.35 11.4-20.54 18.78-29.08 2.02-2 5.66-2.77 7.58-.87 1.7 1.68 1.57 5.8.22 7.86l-7.44 11.18c-1.25 2.12 1.8 3.84 3.63 1.57 9.52-12.9 12.13-15.51 12.13-20.7V59.3c0-3.03 2.22-5.94 5.06-5.94 2.7 0 5.04 2.8 5.04 5.43v40.68c0 5.27-16.65 21.22-16.65 28.65v5.24H85v-7.68z' clip-rule='evenodd'/%3E%3C/svg%3E") left bottom/contain no-repeat}.animated.box-bounced{-webkit-animation:box-bounce-down var(--duration) ease-in forwards;animation:box-bounce-down var(--duration) ease-in forwards}.animated .box-jello{-webkit-animation:box-jello calc(var(--duration) * 2.5) ease var(--duration);animation:box-jello calc(var(--duration) * 2.5) ease var(--duration)}.animated .box-cover-front{-webkit-animation-name:box-cover-front;animation-name:box-cover-front}.animated .box-cover-back{-webkit-animation-name:box-cover-back;animation-name:box-cover-back}.animated .box-cover-right{-webkit-animation-name:box-cover-right;animation-name:box-cover-right}.animated .box-cover-left{-webkit-animation-name:box-cover-left;animation-name:box-cover-left}@-webkit-keyframes box-bounce-down{0%{-webkit-transform:translateY(var(--bounce-down-distance));transform:translateY(var(--bounce-down-distance))}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes box-bounce-down{0%{-webkit-transform:translateY(var(--bounce-down-distance));transform:translateY(var(--bounce-down-distance))}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes box-jello{0%,100%{-webkit-transform:translate(-50%,-50%) scale(.999,.999);transform:translate(-50%,-50%) scale(.999,.999)}30%{-webkit-transform:translate(-50%,-50%) scale(1.25,.7);transform:translate(-50%,-50%) scale(1.25,.7)}40%{-webkit-transform:translate(-50%,-50%) scale(.75,1.35);transform:translate(-50%,-50%) scale(.75,1.35)}75%{-webkit-transform:translate(-50%,-50%) scale(1.05,.95);transform:translate(-50%,-50%) scale(1.05,.95)}}@keyframes box-jello{0%,100%{-webkit-transform:translate(-50%,-50%) scale(.999,.999);transform:translate(-50%,-50%) scale(.999,.999)}30%{-webkit-transform:translate(-50%,-50%) scale(1.25,.7);transform:translate(-50%,-50%) scale(1.25,.7)}40%{-webkit-transform:translate(-50%,-50%) scale(.75,1.35);transform:translate(-50%,-50%) scale(.75,1.35)}75%{-webkit-transform:translate(-50%,-50%) scale(1.05,.95);transform:translate(-50%,-50%) scale(1.05,.95)}}@-webkit-keyframes box-cover-left{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}50%{-webkit-transform:rotateY(-190deg);transform:rotateY(-190deg)}70%{-webkit-transform:rotateY(-150deg);transform:rotateY(-150deg)}100%{-webkit-transform:rotateY(-190deg);transform:rotateY(-190deg)}}@keyframes box-cover-left{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}50%{-webkit-transform:rotateY(-190deg);transform:rotateY(-190deg)}70%{-webkit-transform:rotateY(-150deg);transform:rotateY(-150deg)}100%{-webkit-transform:rotateY(-190deg);transform:rotateY(-190deg)}}@-webkit-keyframes box-cover-right{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}50%{-webkit-transform:rotateY(170deg);transform:rotateY(170deg)}70%{-webkit-transform:rotateY(100deg);transform:rotateY(100deg)}100%{-webkit-transform:rotateY(140deg);transform:rotateY(140deg)}}@keyframes box-cover-right{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}50%{-webkit-transform:rotateY(170deg);transform:rotateY(170deg)}70%{-webkit-transform:rotateY(100deg);transform:rotateY(100deg)}100%{-webkit-transform:rotateY(140deg);transform:rotateY(140deg)}}@-webkit-keyframes box-cover-back{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}50%{-webkit-transform:rotateX(190deg);transform:rotateX(190deg)}70%{-webkit-transform:rotateX(130deg);transform:rotateX(130deg)}100%{-webkit-transform:rotateX(140deg);transform:rotateX(140deg)}}@keyframes box-cover-back{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}50%{-webkit-transform:rotateX(190deg);transform:rotateX(190deg)}70%{-webkit-transform:rotateX(130deg);transform:rotateX(130deg)}100%{-webkit-transform:rotateX(140deg);transform:rotateX(140deg)}}@-webkit-keyframes box-cover-front{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}50%{-webkit-transform:rotateX(-190deg);transform:rotateX(-190deg)}70%{-webkit-transform:rotateX(-150deg);transform:rotateX(-150deg)}100%{-webkit-transform:rotateX(-190deg);transform:rotateX(-190deg)}}@keyframes box-cover-front{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}50%{-webkit-transform:rotateX(-190deg);transform:rotateX(-190deg)}70%{-webkit-transform:rotateX(-150deg);transform:rotateX(-150deg)}100%{-webkit-transform:rotateX(-190deg);transform:rotateX(-190deg)}}