:root {
	--expand: 1.5;
}

.cube {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 1em;
	height: 1em;
	display: grid;
	margin: auto;
	transform-style: preserve-3d;
	transform-origin: 1.6em 0em 0em;
  
	transform: rotateX(calc(var(--x, 135) * 1deg))
	  rotateY(calc(var(--y, 45) * 1deg)) rotateZ(calc(var(--z, 0) * 1deg)) translateY(-100px);
  }
  
  .side {
	  background-size: contain;
	grid-area: 1 / 1;
	width: 3em;
	height: 3em;
	overflow: hidden;
	transform-style: preserve-3d;
	--expand: translateZ(1.499em);
	--transform3d: var(--rotate) var(--expand);
	backface-visibility: hidden;
	background-color: lightgrey;
	border: 1px black;
  }
  
  .cubeface1 {
	transform: rotateY(0deg) var(--expand);
	background-image: url('../img/100-ngb-full-signature-side.jpg')
  }
  .cubeface2 {
	transform: rotateY(180deg) var(--expand) rotateZ(90deg);
	background-image: url('../img/new-fifty-banknote-flipped.jpg')
  }
  .cubeface3 {
	transform: rotateY(90deg) var(--expand);
	background-image: url('../img/new-twenty-banknote.jpg')
  }
  .cubeface4 {
	transform: rotateY(-90deg) var(--expand);
	background-image: url('../img/new-ten-banknote-flipped.jpg')
  }
  .cubeface5 {
	transform: rotateX(-90deg) var(--expand);
	background-image: url('../img/five-dollar-note-ngb.jpg')
  }
  .cubeface6 {
	transform: rotateX(90deg) var(--expand);
	background-image: url('../img/new-ten-banknote.jpg')
  }