.cube {
	transform-style: preserve-3d;
	--size: 200px;
	width: var(--size);
	height: var(--size);
	transform: rotateX(20deg) rotateY(10deg);
}

.cube > div {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #eee;
	box-sizing: border-box;
	border: 5px solid #888;

	display: flex;
	justify-content: center;
	align-items: center;
}

.cube > .top {
	transform: translateY(calc(var(--size) / 2)) rotateX(-90deg);
}

.cube > .bottom {
	transform: translateY(calc(var(--size) / -2)) rotateX(90deg);
}

.cube > .front {
	transform: translateZ(calc(var(--size) / 2));
}

.cube > .back {
	transform: translateZ(calc(var(--size) / -2)) rotateY(180deg);
}

.cube > .left {
	transform: translateX(calc(var(--size) / 2)) rotateY(90deg);
}

.cube > .right {
	transform: translateX(calc(var(--size) / -2)) rotateY(-90deg);
}