:root {
	--width: 500px;
	--height: 500px;
	--half-width: calc(var(--width) / 2);
	--half-height: calc(var(--width) / 2);
}

body {
  background: radial-gradient(white, #3b3b3b);
  display: flex;
  align-items: center;
  justify-content: center;
	height: 100vh;
}

#container {
  width: var(--width);
  height: var(--height);
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
	position: relative;
}

.side {
  width: 100%;
  height: 100%;
	position: absolute;
	border: solid 1px red;
	background: linear-gradient(blue, gold);
}

#right {
	transform: rotateY(90deg) translateZ(var(--half-width));
}

#left {
	transform: rotateY(-90deg) translateZ(var(--half-width));
}

#top {
	transform: rotateX(90deg) translateZ(var(--half-height));
}

#back {
	transform: rotateX(180deg) translateZ(var(--half-height));
}

#bottom {
	transform: rotateX(-90deg) translateZ(var(--half-height));
}