<h1>hover me</h1>
<img src="https://picsum.photos/id/1069/500/300" >

img {
  --x:10px;
  --y:20px;
  clip-path:polygon(
       var(--y)              var(--y),
       calc(100% - var(--y)) var(--y),
       calc(100% - var(--y)) calc(100% - var(--y)),
       var(--y)              calc(100% - var(--y)),
       0 calc(100% - var(--x) - var(--y)),
       0 calc(var(--x) + var(--y)));
  margin:30px;
  transform:perspective(1000px) rotateY(40deg);
  outline: var(--y) solid rgba(0,0,0,0.4);
  outline-offset: calc(-1*var(--y));
  padding:var(--y) var(--y) var(--y) 0;
  transition:1s all;
  max-width:100%;
  display:block;
  margin:auto;
}

img:hover {
  transform:perspective(1000px) rotateY(0deg);
  clip-path:polygon(
       var(--y)              var(--y),
       calc(100% - var(--y)) var(--y),
       calc(100% - var(--y)) calc(100% - var(--y)),
       var(--y)              calc(100% - var(--y)),
       var(--y)  calc(100% - var(--x) - var(--y)),
       var(--y)  calc(var(--x) + var(--y))
    );
}

h1 {
  text-align:center;
}