Why send an email when you can send a digital envelope? This stunning CSS interaction leverages transform-origin to unhinge the top flap of an envelope physically!

The Envelope Flap Calculation

The flap of an envelope is just a triangle. We rotate it along the top x-axis edge so it hinges backward natively into 3D space.

.flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-top: 100px solid #db2777; /* The point of triangle */
  
  transform-origin: top;
  transition: transform 0.6s;
  z-index: 5;
}

.envelope.open .flap {
  transform: rotateX(180deg);
  z-index: 1; /* Drop it behind the letter! */
}

Wait until you click the envelope in the Live Demo! The letter physically slides upward out of the pocket seamlessly!