css 3d, transform-style: preserve-3d

.box{position: absolute; width: 200px; height: 200px; left: 50%; top: 20%;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateY(-50deg);
    }
.box::before{content: ''; position: absolute; left: 0; bottom: -120px; width: 100%; height: 150px; background: #000; transform: rotateX(90deg);filter: blur(40px);opacity: 0.5;}
.box div{position: absolute; inset: 0; 
    transform-style: preserve-3d;
    transform: rotateX(-10deg)
    }
.box div span {position: absolute; inset: 0; background: linear-gradient(0deg, #fdcd5d, #dd4c4c); border-radius: 20px; 
    transform: rotateX(calc(var(--i) * 45deg)); 
    transform-style:preserve-3d;
    }

<div class="box">
    <div>
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
        <span style="--i:4"></span>
    </div>
</div>