<img src="https://picsum.photos/id/58/300/300" alt="a lighthouse">
<img src="https://picsum.photos/id/61/300/300" class="alt" alt="an old city">

img {
  --a: 8deg; /* control the angle of rotation (the smaller, the better) */
  width: 250px;
  aspect-ratio: 1;
  border-radius: 20px;
  transform: perspective(400px) rotate3d(var(--r,1,-1),0,calc(var(--i,1)*var(--a)));
  -webkit-mask: 
    linear-gradient(135deg,#000c 40%,#000,#000c 60%)
    100% 100%/250% 250%;
  transition: .4s;
  cursor: pointer;
}
.alt {
  --r: 1,1;
  -webkit-mask: 
    linear-gradient(45deg,#000c 40%,#000,#000c 60%)
    0 100%/250% 250%;
}
img:hover {
  --i: -1;
  -webkit-mask-position: 0 0;
}
.alt:hover {
  -webkit-mask-position: 100% 0;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 80px;
  background: #000;
}