flat earth on globe example

shows why a globe appears to be flat - scale

by Travis Almand

HTML

<div></div>

CSS

body {
  cursor: pointer;
  display: grid;
  height: 100vh;
  overflow: hidden;
  place-items: center;
  width: 100vw;
}
body::before {
  content: 'click anywhere...';
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}

div {
  background-image: radial-gradient(white, rebeccapurple);;
  border-radius: 100%;
  height: 200px;
  transform: scale3d(1, 1, 1);
  transform-origin: top center;
  transition: 3s linear;
  width: 200px;
}
div.scale {
  transform: scale3d(200, 200, 1);
}

JavaScript

const circle = document.querySelector('div');

document.body.addEventListener('click', function () {
	circle.classList.toggle('scale');
});