HTML
<div class="container">
<div class="bottom">
<div class="popup">
<div></div><div></div>
</div>
<div class="side-left">
<div class="popup">
<div></div><div></div>
</div>
</div>
<div class="side-right">
<div class="popup">
<div></div><div></div>
</div>
</div>
<div class="left">
<div class="popup">
<div></div><div></div>
<div class="popup">
<div></div><div></div>
</div>
</div>
</div>
<div class="right">
<div class="popup">
<div></div><div></div>
</div>
<div class="top">
<div class="popup">
<div></div><div></div>
</div>
</div>
</div>
</div>
</div>
SCSS
$shadow: inset 0 0 5px 1px white, 0 0 5px 1px white;
$anim: 8s infinite;
html {
height: 100%;
}
body {
height: 100%;
background: black;
perspective: 900px;
perspective-origin: center center;
trasnform-style: preserve-3d;
overflow: hidden;
}
.container {
left: 10%;
top: 10%;
width: 80%;
height: 80%;
position: absolute;
transform-origin: center center;
animation: rotate-box 8s ease-in infinite;
perspective: 2000px;
perspective-origin: center center;
transform-style: preserve-3d;
}
/* .container {
border: 2px solid white;
background-image: linear-gradient(to bottom, transparent 19px, white 19px, transparent 21px), linear-gradient(to right, transparent 19px, white 19px, transparent 21px);
background-size: 20px 20px;
} */
.container div {
position: absolute;
width: 100px;
top: -1px;
height: 1px;
display: inline-block;
float: left;
border: 1px solid white;
box-shadow: $shadow;
transform-style: preserve-3d;
-moz-box-sizing: border-box;
}
.bottom {
top: calc(50% + 50px) !important;
left: calc(50% - 50px);
transform-origin: center top;
transform: translateZ(-50px);
height: 0px;
box-shadow: none !important;
}
.left {
left: -100px;
animation: rotate-left $anim;
transform-origin: right top;
}
.right {
left: 100px;
animation: rotate-right $anim;
transform-origin: left 1px;
}
.top {
left: 100px;
animation: rotate-top $anim;
transform-origin: left 1px;
}
.side-left {
top: 0;
animation: rotate-side-left $anim;
transform-origin: center top;
}
.side-right {
animation: rotate-side-right $anim;
transform-origin: center top;
transform: rotateX(0deg) rotateY(180deg);
height: 0px;
}
@keyframes rotate-left {
5% {
transform: rotateZ(0);
}
16% {
transform: rotateZ(90deg);
height: 1px;
}
16.001% {
transform: translateY(-100px) rotateY(179deg);
height: 100px;
}
32% {
transform: translateY(-100px) rotateY(0deg);
}
48% {
transform: translateY(-100px) rotateY(90deg);
}
99.99% {
transform: translateY(-100px) rotateY(90deg);
}
100% {
height: 100px;
}
}
@keyframes rotate-right {
5% {
transform: rotateZ(0);
}
16% {
transform: rotateZ(-90deg);
height: 1px;
}
16.001% {
transform: translateY(-100px) rotateY(-179deg);
height: 100px;
}
32% {
transform: translateY(-100px) rotateY(0deg);
}
48% {
transform: translateY(-100px) rotateY(-90deg);
}
99.99% {
transform: translateY(-100px) rotateY(-90deg);
}
100% {
height: 100px;
}
}
@keyframes rotate-top {
5% {
transform: rotateZ(0);
}
16% {
transform: rotateZ(-90deg);
height: 1px;
}
16.001% {
transform: rotateY(-180deg);
height: 100px;
}
32% {
transform: rotateY(0deg);
}
48% {
transform: rotateY(-90deg);
}
99.99% {
transform: rotateY(-90deg);
}
100% {
height: 100px;
}
}
@keyframes rotate-side-left {
16% {
height: 0px;
}
16.001% {
height: 100px;
transform: rotateX(179deg);
}
32% {
transform: rotateX(0deg);
}
48% {
transform: rotateX(90deg);
}
99.99% {
transform: rotateX(90deg);
}
100% {
height: 100px;
}
}
@keyframes rotate-side-right {
16% {
height: 0px;
top: 0px;
}
16.001% {
height: 100px;
top: -100px;
transform: rotateX(0deg) rotateY(180deg);
}
32% {
transform: rotateX(179deg) rotateY(180deg);
}
48% {
transform: rotateX(90deg) rotateY(180deg);
}
99.99% {
transform: rotateX(90deg) rotateY(180deg);
}
100% {
height: 100px;
top: -100px;
}
}
@keyframes rotate-box {
25% {
transform: rotateZ(20deg);
}
50% {
transform: rotateZ(60deg) rotateY(40deg) rotateX(60deg);
}
100% {
transform: rotateZ(0) rotateY(-520deg) rotateX(40deg);
}
}
.popup {
animation: popup-face $anim;
transform-origin: center top;
height: 100px;
}
.popup > .popup {
animation: popup2-face $anim;
transform-origin: center top;
height: 100px;
top: 50%;
left: 50%;
}
.bottom > .popup {
top: -100px !important;
}
.popup > div:not(.popup) {
position: absolute;
width: 100%;
height: 100%;
border: none !important;
box-shadow: none !important;
}
.popup > div:not(.popup):after, .popup > div:not(.popup):before {
content: ' ';
position: absolute;
width: 1px;
background: white;
box-shadow: $shadow;
height: 0px;
transform-origin: center top;
transform: rotateX(90deg);
left: 0;
top: 0;
animation: popup-sides-1 $anim;
}
.popup > div:not(.popup):nth-child(1):after {
animation: popup-sides-2 $anim;
}
.popup > div:not(.popup):nth-child(2):before {
animation: popup-sides-3 $anim;
}
.popup > div:not(.popup):nth-child(2):after {
animation: popup-sides-4 $anim;
}
.popup > .popup > div:before {
animation: popup2-sides-1 $anim;
}
.popup > .popup > div:nth-child(1):after {
animation: popup2-sides-2 $anim;
}
.popup > .popup > div:nth-child(2):before {
animation: popup2-sides-3 $anim;
}
.popup > .popup > div:nth-child(2):after {
animation: popup2-sides-4 $anim;
}
@keyframes popup-face {
0% {
opacity: 0;
}
47.99% {
opacity: 0;
}
48% {
opacity: 1;
transform: translateZ(0px);
}
64% {
transform: translateZ(-100px);
height: 100px;
width: 100px;
}
80% {
height: 300px;
width: 300px;
transform: translateX(-100px) translateY(-100px) translateZ(-100px);
}
100% {
height: 300px;
width: 300px;
transform: translateX(-100px) translateY(-100px) translateZ(-100px);
}
}
@keyframes popup2-face {
0% {
opacity: 0;
}
47.99% {
opacity: 0;
}
48% {
opacity: 1;
transform: translateX(-50%) translateY(-50%) translateZ(0px);
}
64% {
transform: translateX(-50%) translateY(-50%) translateZ(-100px);
height: 100px;
width: 100px;
}
72% {
height: 320px;
width: 320px;
}
80% {
height: 300px;
width: 300px;
transform: translateX(-50%) translateY(-50%) translateZ(300px);
}
100% {
height: 300px;
width: 300px;
transform: translateX(-50%) translateY(-50%) translateZ(300px);
}
}
@keyframes popup-sides-1 {
0% {
height: 0px;
}
48% {
height: 0px;
}
64% {
height: 100px;
transform: rotateX(90deg);
}
80% {
height: 173px;
transform: rotateX(45deg) rotateZ(-35.27deg);
}
100% {
height: 173px;
transform: rotateX(45deg) rotateZ(-35.27deg);
}
}
@keyframes popup-sides-2 {
0% {
height: 0px;
transform: translateX(100px) rotateX(90deg);
}
48% {
height: 0px;
}
64% {
height: 100px;
transform: translateX(100px) rotateX(90deg);
}
80% {
height: 173px;
transform: translateX(300px) rotateX(45deg) rotateZ(35.27deg);
}
100% {
height: 173px;
transform: translateX(300px) rotateX(45deg) rotateZ(35.27deg);
}
}
@keyframes popup-sides-3 {
0% {
height: 0px;
transform: translateY(100px) rotateX(90deg);
}
48% {
height: 0px;
}
64% {
height: 100px;
transform: translateY(100px) rotateX(90deg);
}
80% {
height: 173px;
transform: translateY(300px) rotateX(-45deg) rotateZ(-144.73deg);
}
100% {
height: 173px;
transform: translateY(300px) rotateX(-45deg) rotateZ(-144.73deg);
}
}
@keyframes popup-sides-4 {
0% {
height: 0px;
transform: translateX(100px) translateY(100px) rotateX(90deg);
}
48% {
height: 0px;
}
64% {
height: 100px;
transform: translateX(100px) translateY(100px) rotateX(90deg);
}
80% {
height: 173px;
transform: translateX(300px) translateY(300px) rotateX(-45deg) rotateZ(144.73deg);
}
100% {
height: 173px;
transform: translateX(300px) translateY(300px) rotateX(-45deg) rotateZ(144.73deg);
}
}
@keyframes popup2-sides-1 {
0% {
height: 0px;
}
48% {
height: 0px;
}
64% {
height: 100px;
transform: rotateX(90deg);
}
72% {
height: 116px;
transform: rotateZ(-45deg) rotateX(-67deg);
}
80% {
height: 300px;
transform: rotateX(-90deg);
}
100% {
height: 300px;
transform: rotateX(-90deg);
}
}
@keyframes popup2-sides-2 {
0% {
height: 0px;
transform: translateX(100px) rotateX(90deg);
}
48% {
height: 0px;
}
64% {
height: 100px;
transform: translateX(100px) rotateX(90deg);
}
72% {
height: 116px;
transform: translateX(320px) rotateZ(-45deg) rotateX(-67deg);
}
80% {
height: 300px;
transform: translateX(300px) rotateX(-90deg);
}
100% {
height: 300px;
transform: translateX(300px) rotateX(-90deg);
}
}
@keyframes popup2-sides-3 {
0% {
height: 0px;
transform: translateY(100px) rotateX(90deg);
}
48% {
height: 0px;
}
64% {
height: 100px;
transform: translateY(100px) rotateX(90deg);
}
72% {
height: 116px;
transform: translateY(320px) rotateZ(-135deg) rotateX(-67deg);
}
80% {
height: 300px;
transform: translateY(300px) rotateX(-90deg);
}
100% {
height: 300px;
transform: translateY(300px) rotateX(-90deg);
}
}
@keyframes popup2-sides-4 {
0% {
height: 0px;
transform: translateX(100px) translateY(100px) rotateX(90deg);
}
48% {
height: 0px;
}
64% {
height: 100px;
transform: translateX(100px) translateY(100px) rotateX(90deg);
}
72% {
height: 116px;
transform: translateX(320px) translateY(320px) rotateZ(-135deg) rotateX(-67deg);
}
80% {
height: 300px;
transform: translateX(300px) translateY(300px) rotateX(-90deg);
}
100% {
height: 300px;
transform: translateX(300px) translateY(300px) rotateX(-90deg);
}
}
