SCSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255,114,96,1);
background: linear-gradient(45deg,
rgba(255,114,96,1) 0%,
rgba(255,114,96,1) 14%,
rgba(252,210,113,1) 54%,
rgba(252,210,113,1) 61%,
rgba(102,176,102,1) 93%,
rgba(96,135,134,1) 100%);
}
.stage {
transform: scale(0.85);
margin-right: 120px;
width: 0px;
height: 0px;
position: relative;
perspective: 1200px;
perspective-origin: 50% 50%;
}
.pyramid {
position: relative;
width: 150px;
height: 150px;
transform-style: preserve-3d;
transform: rotateX(75deg) rotate(65deg);
animation: rotate 2s linear infinite;
}
.triangle {
transform-style: preserve-3d;
width: 0;
height: 0;
background: none;
}
.triangle:before {
content: "";
position: absolute;
height: 0;
width: 0;
border-style: solid;
border-width: 176px 75px 0 75px;
}
div[class*="side-"] {
opacity: 0.8;
}
.side-1 {
transform: translatex(0) rotatey(115.2deg) rotatez(90deg);
&:before {
border-color: #E3493B transparent transparent transparent;
}
}
.side-2 {
transform: translatex(150px) rotatez(90deg) rotatex(64.8deg);
&:before {
border-color: #23B5AF transparent transparent transparent;
}
}
.side-3 {
transform: translatez(0) rotatex(64.8deg);
&:before {
border-color: #E8487F transparent transparent transparent;
}
}
.side-4 {
transform: translatey(150px) rotatex(115.2deg);
&:before {
border-color: #28B78D transparent transparent transparent;
}
}
@keyframes rotate {
100% { transform: rotateX(75deg) rotate(425deg); }
}
1 Response