cferdinandi/index.html

## index.html
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Monster flip card</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="card-container">
  <button class="card card--front" data-monster="monster1" aria-label="Open the Door"></button>
  <div class="card card--back">
  	<div class="screen-reader" aria-live="polite"></div>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

## script.js
const card = document.querySelector(".card-container");
const cardFront = document.querySelector(".card--front");
const cardBack = document.querySelector(".card--back");
card.addEventListener("click", e => {
  const monster = e.target.closest("[data-monster]");
  if (!monster) return;
  card.classList.add("card--clicked");
  // setTimeout(() => card.removeChild(cardFront), 500);
  card.addEventListener('transitionend', function () {
  	cardFront.remove();
  	let sr = cardBack.querySelector('.screen-reader');
  	sr.textContent = monster.getAttribute('data-monster') + ' was behind the door';
  });
});

## style.css
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
}
.card-container {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 400px;
  width: 300px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 1000px;
  background: none;
  /* border:none; */
}
.card-container.card--clicked .card--front {
  transform: rotateY(-180deg);
}

.card-container.card--clicked .card--back {
  transform: rotateY(0deg);
  cursor: not-allowed;
}
.card {
  position: absolute;
  height: 100%;
  width: 100%;
  background-position: 50% 50%;
  background-size: 90%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transition: 1.5s;
  cursor: pointer;
}
.card--front {
  background-image: url(https://gist.githubusercontent.com/cferdinandi/b216c6c06685a381ec5bd547410d76c1/raw/ea404869e2c3b02738b36ccb9d82921f80cbf2bd/door.svg);
  transform: rotateY(0deg);
  background-color: transparent;
  border: none;
}
.card--back {
  background-image: url(https://gist.githubusercontent.com/cferdinandi/b216c6c06685a381ec5bd547410d76c1/raw/ea404869e2c3b02738b36ccb9d82921f80cbf2bd/monster1.svg);
  transform: rotateY(180deg);
}


/**
 * Remove all animations and transitions for people that prefer not to see them
 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Hide only visually, but have it available for screen readers:
 * @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.screen-reader {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap; /* 1 */
  width: 1px;
}
	<!DOCTYPE html>
	<html lang="en" >
	<head>
	<meta charset="UTF-8">
	<title>CodePen - Monster flip card</title>
	<link rel="stylesheet" href="./style.css">

	</head>
	<body>
	<!-- partial:index.partial.html -->
	<div class="card-container">
	<button class="card card--front" data-monster="monster1" aria-label="Open the Door"></button>
	<div class="card card--back">
	<div class="screen-reader" aria-live="polite"></div>
	</div>
	</div>
	<!-- partial -->
	<script src="./script.js"></script>

	</body>
	</html>
	const card = document.querySelector(".card-container");
	const cardFront = document.querySelector(".card--front");
	const cardBack = document.querySelector(".card--back");
	card.addEventListener("click", e => {
	const monster = e.target.closest("[data-monster]");
	if (!monster) return;
	card.classList.add("card--clicked");
	// setTimeout(() => card.removeChild(cardFront), 500);
	card.addEventListener('transitionend', function () {
	cardFront.remove();
	let sr = cardBack.querySelector('.screen-reader');
	sr.textContent = monster.getAttribute('data-monster') + ' was behind the door';
	});
	});
	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}
	body {
	min-height: 100vh;
	}
	.card-container {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 400px;
	width: 300px;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	perspective: 1000px;
	background: none;
	/* border:none; */
	}
	.card-container.card--clicked .card--front {
	transform: rotateY(-180deg);
	}

	.card-container.card--clicked .card--back {
	transform: rotateY(0deg);
	cursor: not-allowed;
	}
	.card {
	position: absolute;
	height: 100%;
	width: 100%;
	background-position: 50% 50%;
	background-size: 90%;
	background-repeat: no-repeat;
	backface-visibility: hidden;
	transition: 1.5s;
	cursor: pointer;
	}
	.card--front {
	background-image: url(https://gist.githubusercontent.com/cferdinandi/b216c6c06685a381ec5bd547410d76c1/raw/ea404869e2c3b02738b36ccb9d82921f80cbf2bd/door.svg);
	transform: rotateY(0deg);
	background-color: transparent;
	border: none;
	}
	.card--back {
	background-image: url(https://gist.githubusercontent.com/cferdinandi/b216c6c06685a381ec5bd547410d76c1/raw/ea404869e2c3b02738b36ccb9d82921f80cbf2bd/monster1.svg);
	transform: rotateY(180deg);
	}


	/**
	* Remove all animations and transitions for people that prefer not to see them
	*/
	@media (prefers-reduced-motion: reduce) {
	* {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
	}
	}

	/*
	* Hide only visually, but have it available for screen readers:
	* @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
	*
	* 1. For long content, line feeds are not interpreted as spaces and small width
	* causes content to wrap 1 word per line:
	* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
	*/
	.screen-reader {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap; /* 1 */
	width: 1px;
	}