body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	min-width: 100%;
}
.square {
	background-color: blue;

	width: 5rem;
	height: 5rem;

	&.full-screen {
		width: 100vw;
		height: 100vh;
		background-color: goldenrod;
	}
}

button {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 1rem 2rem;
}

const square = document.querySelector(".square");

let first, last, deltaX, deltaY, deltaW, deltaH, flipAnimation;

calculateFlip();

square.addEventListener("click", () => {
	flipAnimation.playState === "finished"
		? flipAnimation.reverse()
		: flipAnimation.play();
});

function calculateFlip() {
	// Get default (first) value
	first = square.getBoundingClientRect();
	square.classList.add("full-screen");

	// Get final (last) value
	last = square.getBoundingClientRect();
	square.classList.remove("full-screen");

	// Delta means the difference between
	deltaX = last.left - first.left;
	deltaY = last.top - first.top;
	deltaW = last.width / first.width;
	deltaH = last.height / first.height;

	// Web Animation API
	flipAnimation = square.animate(
		[
			// from
			{
				transformOrigin: "top left",
				transform: `translate3d(0px, 0px, 0px) scale(1)`,
				backgroundColor: "blue"
			},
			// to
			{
				transformOrigin: "top left",
				transform: `
					translate3d(${deltaX}px, ${deltaY}px, 0px) 
					scale(${deltaW}, ${deltaH})
		`,
				backgroundColor: "goldenrod"
			}
		],
		{
			duration: 500,
			easing: "ease-in-out",
			fill: "both",
			direction: "alternate"
		}
	);

	flipAnimation.pause();
}

// For resizing:
window.addEventListener("resize", calculateFlip);