body {
  height: 100vh;
  overflow: hidden;
  background-color: #333;
}

main {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  perspective: 100vmin;
}
main figure {
  --x: 0;
  --y: 0;
  position: relative;
  transform: rotateY(calc(var(--x) * 20deg)) rotateX(calc(var(--y) * -20deg));
  width: 80vmin;
  height: 60vmin;
}
main figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  padding: 1vmin;
  background-color: white;
  filter: sepia(0.85) saturate(1.4) brightness(calc(0.7 + (var(--x) + var(--y)) * -0.15));
}
main figure .reflect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: url(https://assets.codepen.io/2509128/noise3.png);
  -webkit-mask-size: 66%;
          mask-size: 66%;
  mix-blend-mode: overlay;
}
main figure .reflect::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to left, transparent, #fed, transparent);
  background-repeat: no-repeat;
  transform: translateX(calc(-75% + -100% * var(--x) + -50% * var(--y))) rotate(40deg) scaleY(3);
}