Ponzo Illusion - CSS Optical Illusions

Code Live Demo

:root {
  background: #ccc;
  height: 100vh;
  overflow: hidden;
  perspective: 100vh;
  position: relative;
  
  &::before {
    background:
      linear-gradient(#000 0 0) 15% 100% / 2vmin 100% no-repeat,
      linear-gradient(#000 0 0) 85% 100% / 2vmin 100% no-repeat,
      repeating-linear-gradient(#000 0 2vmin, #fff0 0 16.66vmin);
    bottom: 0%;
    content: "";
    height: 2000vh;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0%) rotate3d(1, 0, 0, 60deg);
    transform-origin: 50% 100%;
    width: 80vmin;
  }
  
  &::after {
    border-block: 1.5vh solid #ff0;
    box-shadow: 1.5vh 0, -1.5vh 0;
    color: #0000;
    content: "";
    height: 40vh;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: color 1s;
    translate: -50% -50%;
    width: 19vh;
  }
  
  @media(aspect-ratio < 1) {
    &::before {
      width: 100vh;
    }
    
    &::after {
      width: 26vh;
    }
  }
  
  &:hover {
    &::after {
      color: red;
    }
  }
}

About This Illusion

Both yellow lines are the same length, but the top one looks longer due to perceived depth and perspective.

I tried a different approach when coding this one by applying a three-dimensional rotation in CSS... so the perspective is technically real.

Try This

Mouse over the demo to see the illusion in action.