Examples

  html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #333;
    color: #fff;
    overflow: hidden;
  }
  body {
    padding: 5px 20px;
  }
  #platform {
    perspective: 1000px;
    perspective-origin: center;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: all ease 1s;
    z-index: 1;
  }
  label {
    z-index: 2;
    position: relative;
  }
  select {
    cursor: pointer;
  }
  input {
    position: absolute;
    left: -9999px;
  }
  body:has(option[value="100"]:checked) #platform{
    perspective: 100px;
  }
  body:has(option[value="250"]:checked) #platform{
    perspective: 250px;
  }
  body:has(option[value="500"]:checked) #platform{
    perspective: 500px;
  }
  body:has(option[value="750"]:checked) #platform{
    perspective: 750px;
  }
  body:has(option[value="1000"]:checked) #platform{
    perspective: 1000px;
  }
  body:has(option[value="1500"]:checked) #platform{
    perspective: 1500px;
  }
  body:has(option[value="3000"]:checked) #platform{
    perspective: 3000px;
  }
  .matrix3D {
    position: absolute;
    rotate: x 60deg;
    background: rgba(0, 0, 0, 0.6);
    width: 200px;
    height: 200px;
    top: -100px;
    left: -100px;
    transform: rotateX(0deg);
    transition: all ease 1s;
    cursor: pointer;
  }
  .matrix3D:hover {  
    animation: spinMatrix 7s linear infinite;
  }
  .matrix3D:active { 
    width: 600px;
    left: -300px;
  }
  body:has(option[value="6px"]:checked) #platform{
    font-size: 6px;
  }
  body:has(option[value="12px"]:checked) #platform{
    font-size: 12px;
  }
  body:has(option[value="16px"]:checked) #platform{
    font-size: 16px;
  }
  body:has(option[value="18px"]:checked) #platform{
    font-size: 18px;
  }
  body:has(option[value="24px"]:checked) #platform{
    font-size: 24px;
  }
  #platform b {
    --boxelSize: 3.5em;
    content: '';
    --rotateX: -90;
    --translateZ: 1;
    display: block;
    position: absolute;
    width: var(--boxelSize);
    height: var(--boxelSize);
    transform-style: preserve-3d;
    transform-origin: left bottom;
    background: #333 url(https://bob.wadholm.com/css-3d/src/geyser.jpg) center;
    transition: all ease 1s;
  }
  #platform b.b1 {
    --translateY: -70;
  }
  #platform b.b1,
  #platform b.b1 b {
    --boxelSize: 7em;
  }
  #platform b.b0 {
    --translateX: 144;
  }
  #platform b:before {
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    position: absolute;
    background: #333 url(https://bob.wadholm.com/css-3d/src/geyser.jpg) center top;
    background-size: 600%;
    transition: all ease 1s;
    --rotateX: -90;
    transform-origin: left bottom;
    box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.6), 0 0 1em rgba(0, 0, 0, 0.6);
  }
  #platform b:after {
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    position: absolute;
    background: #333 url(https://bob.wadholm.com/css-3d/src/geyser.jpg) center top;
    background-size: 600%;
    box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.6);
    transition: all ease 1s;
    --rotateX: 0;
    --rotateY: 90;
    transform-origin: left top;
  }
  #platform  b b {
    --rotateX: 90 !important;
    transform-origin: right top;
  }
  #platform  b b:before {
    --rotateX: 90;
    box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.6);
  }
  #platform  b b:after {
    --rotateX: 0;
    --rotateY: 90;
    transform-origin: right bottom;
  }

  @keyframes spinMatrix {
    0% { transform: rotateX(0deg) rotateY(0deg);}
    100% { transform: rotateX(-360deg) rotateY(-360deg);}
  }
  #platform *, #platform  *:before, #platform *:after {
    transform-style: preserve-3d;
    transform-origin: center center;
  }