<h2>CLICK <mark>&#X2255;</mark> TO <mark>SHOW</mark> THE MENU </h2> 

<div id=wrapper>
	<input type=checkbox> 
	<div id=menu>
		<ul>
			<li>A</li>
			<li>LIST</li>
			<li>OF</li>
			<li>MENU</li>
			<li>ITEMS</li>
			<li>WILL</li>
			<li>GO</li>
			<li>HERE</li>
		</ul>
	</div>
	<div id=page></div>
</div>

<h2>CLICK <mark>x</mark> OR THE <mark>IMAGE</mark> TO <mark>HIDE</mark> THE MENU </h2>

/* Hide checkbox and reset styles */
input[type="checkbox"] {
	appearance: initial; 
	-webkit-appearance: initial; 
	-moz-appearance:initial;
	border-top-left-radius: 10px; 
	border:0; margin: 0; outline: none; 
	width: 30px; height: 30px; 
	z-index: 1; 
}


/* Menu icon */
input::after { 
	border-top-left-radius: 10px;
	content: '\2255'; 
	display: block; 
	font: 25pt/30px 'georgia'; 
	text-indent: 10px; 	
	transition-delay: .25s;
	width: 100%; height: 100%;
}

#page{
	background: url('photo-1504274066651-8d31a536b11a?w=668&q=80') #ebebeb center/cover; 
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	transition: all .3s linear; 
	width: 100%; height: 100%;
}


/* When menu is open, transform the page */
input:checked ~ #page { 
	clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
	transform: translateX(40%) rotateY(10deg) scale(0.8); 
	transform-origin: right center;
	transition: all .3s linear; 
	
} 

input:checked::after { 
	background: #1e3232; 
	content: '\00d7'; 
	color: #ebebeb; 
	transition-delay: -.1s;
} 

#menu, #page, input{ position: absolute; }

#wrapper {
	background: linear-gradient(45deg, black, darkslategrey); 
	border-radius: 10px; 
	box-shadow: 0 0 20px lightgrey; 
	margin: auto; margin-top: calc(50vh - 250px);
	overflow: hidden; 
	position: relative; 
	width: 300px; height: 500px; 
}

ul {
	background: linear-gradient(#fef8a5 20%, powderblue); 
	background-clip: text; 
	-webkit-background-clip: text; 
	color: transparent; 
	font: bold 15pt/30pt 'fugaz one'; 
	margin-top: 50px;
}

h2 {
	width: max-content; position: absolute;
	font: 15pt 'contrail one'; word-spacing: 10px;
}

h2:nth-of-type(1) {
	transform: rotate(-90deg); transform-origin: bottom left;
	left: calc(50vw - 160px); bottom: calc(50vh - 250px);
} 

h2:nth-of-type(2) {
	transform: rotate(90deg); transform-origin: top left;
	left: calc( 50vw + 180px); top: calc(50vh -  250px);
}

mark {background: #fef8a5;} 

document.querySelector("#page").addEventListener('click', (e, checkbox = document.querySelector('input'))=>{ 
			if(checkbox.checked) { checkbox.checked = false; e.stopPropagation(); }
		});