img {
	/* adjust the below to control the 3D effect */
  --x:10px;
	--y:20px;
	transform:perspective(1000px) rotateX(var(--_a,40deg));
	/* */
  clip-path:polygon(       
     var(--y)              var(--y),calc(100% - var(--y)) var(--y),calc(100% - var(--y)) calc(100% - var(--y)),calc(100% - var(--y) - var(--x)) var(--_c,100%),calc(var(--x) + var(--y))        var(--_c,100%),var(--y)        calc(100% - var(--y))       
     );
	outline:var(--y) solid rgba(0,0,0,0.4);
	outline-offset:calc(-1*var(--y));
	padding:var(--y) var(--y) 0 var(--y);
	transition:1s;
}
.box:hover img {
	--_a:0deg;
	--_c:calc(100% - var(--y));
}
/* the below is irrelevant to the 3D effect */
.box {
	cursor:pointer;
}
h2 {
	text-align:center;
	margin:0;
	font-size:30px;
	font-weight:bold;
	font-family:sans-serif;
	transform:translateY(250%);
	transition:.8s;
}
.box:hover h2 {
	transform:translateY(0%);
	transition:.8s .2s;
}
body {
	background:#ccc;
	display:grid;
	height:100vh;
	grid-auto-flow:column;
	place-content:center;
	gap:40px;
}