3D – CODEBOX

3D

✨ Jabont

<style>
  body{
    margin:0;
    background:#F8BBD0;
    display:flex;
    font-family:sans-serif;
    color:#0008;
  }
  .the_blocks{
    display:flex;
    width:500px;
    margin:auto;
    flex-flow:row wrap;
    transform: rotateX(45deg) rotateZ(30deg);
    transform-style: preserve-3d;
    position:relative;
  }
  .the_blocks::before{
    content:" → X →";
    position:absolute;
    top:-1.5em;
    width:100%;
    text-align:center;
  }
  .the_blocks::after{
    content:"← Y ←";
    position:absolute;
    left:-2.5em;
    top:1em;
    text-align:center;
    transform:rotate(-.25turn);
  }
  .the_blocks .row{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
  }
  block{
    --hue:335;
    width:8%;
    margin:1%;
    padding-top:8%;
    background-color:hsl(var(--hue),100%,50%);
    display:flex;
    position:relative;
    box-sizing:border-box;
  }
  block side{
    width:100%;
    height:100%;
    background-color:#0008;
    display:block;
    position:absolute;
    top:0;
    left:0;
    transform-origin:bottom right;
    transform-style: preserve-3d;
  }
  side.side-1{
    background:hsl(var(--hue),100%,40%);
    transform:rotateY(-90deg);
  }
  side.side-2{
    background:hsl(var(--hue),100%,60%);
    transform:rotateX(90deg);
  }
</style>
<div class="the_blocks">
  <div class="row">
    <block>
      <side class="side-1">
      </side>
      <side class="side-2">
      </side>
    </block>
  </div>
  <div class="row">
    <block>
      <side class="side-1">
      </side>
      <side class="side-2">
      </side>
    </block>
  </div>
  <div class="row">
    <block>
      <side class="side-1">
      </side>
      <side class="side-2">
      </side>
    </block>
  </div>
  <div class="row">
    <block>
      <side class="side-1">
      </side>
      <side class="side-2">
      </side>
    </block>
  </div>
</div>