<p class="browser-warning">If this looks wonky to you it's because this browser doesn't support the CSS property 'aspect-ratio'.</p>
<div class="stack">
	<div class="card">
		<div class="image">
			<!-- Place image here -->
		</div>
	</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*, *:after, *:before {
	box-sizing: border-box;
}

body {
	font-family: "Inter", sans-serif;
	line-height: 1.5;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fefefe;
}

img {
	display: block;
	max-width: 100%;
}

.stack {
	width: 85%;
	max-width: 400px;
	transition: .25s ease;
	&:hover {			
		transform: rotate(5deg);
		.card:before {
			transform: translatey(-2%) rotate(-4deg);
		}	
		.card:after {
			transform: translatey(2%) rotate(4deg);
		}
	}
}

.card {
	aspect-ratio: 3 / 2;
	border: 4px solid;
	background-color: #FFF;
	position: relative;
	transition: .15s ease;
	cursor: pointer;
	padding: 5% 5% 15% 5%;
	&:before, &:after {
		content: "";
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		border: 4px solid;
		background-color: #FFF;
		transform-origin: center center;
		z-index: -1;
		transition: .15s ease;
		top: 0;
		left: 0;
	}
	
	&:before {
		transform: translatey(-2%) rotate(-6deg);
	}
	
	&:after {
		transform: translatey(2%) rotate(6deg);
	}
	

	
}
	.image {
		width: 100%;
		border: 4px solid;
		background-color: #EEE;
		aspect-ratio: 1 / 1;
		position: relative;
	}

.browser-warning {
	margin-bottom: 4rem;
}

@supports (aspect-ratio: 1 / 1) {
	.browser-warning {
		display: none;
	}
}
View Compiled
// Nope

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.