Transparent Rotating Pyramid using CSS

HTML
<div class="stage"> <div class="pyramid"> <div class="triangle side-1"></div> <div class="triangle side-2"></div> <div class="triangle side-3"></div> <div class="triangle side-4"></div> </div> </div>
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); } }
JAVASCRIPT
Expand for more options Login