Pyramid Animation

Home / Web Code Snippet / Pyramid Animation

Pyramid Animation


HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<div class="container">
  <div class="box">
    <span class="side side1"></span>
    <span class="side side2"></span>
    <span class="side side3"></span>
    <span class="side side4"></span>
    <span class="shadow"></span>
  </div>  
</div>
</body>
</html>

CSS CODE:-

body{
        padding: 0px;
        margin: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: black;
    }
    .container{
          position: relative;
          width: 300px;
          height: 300px;
          display: block;
          transform-style: preserve-3d;
          transform: rotateX(-20deg);
    }
    .box{
          position: relative;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          animation:animate 4s linear infinite;
    }
    @keyframes animate{
        0%{
            transform: rotateY(0deg);
        }
          100% {
            transform: rotateY(360deg);
          }
    }
    .side{
          position: absolute;
          inset: 0;
          width: 200px;
          height: 200px;
          margin: auto;
          transform-origin: center top;
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);
    }
    .side1{
          transform: rotateZ(-30deg) rotateY(90deg);
    }
    .side2{
          transform: rotateZ(30deg) rotateY(90deg);
    }
    .side3 {
          transform: rotateX(30deg);
    }
    .side4 {
          transform: rotateX(-30deg);
    }
    .shadow {
          width: 200px;
          height: 200px;
          background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);
          position: absolute;
          top: 70px;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          transform: rotateX(90deg) translateZ(-50px);
          filter: blur(12px);
}