#wrapper
	.cube
		- for (var i = 0; i < 5; ++i)
			.face
		.cube
			- for (var i = 0; i < 5; ++i)
				.face
			.cube
				- for (var i = 0; i < 5; ++i)
					.face
				.cube
					- for (var i = 0; i < 5; ++i)
						.face
					.cube
						- for (var i = 0; i < 5; ++i)
							.face
						.cube
							- for (var i = 0; i < 5; ++i)
								.face
							.cube
								- for (var i = 0; i < 5; ++i)
									.face
								.cube
									- for (var i = 0; i < 5; ++i)
										.face
									.cube
										- for (var i = 0; i < 5; ++i)
											.face
										.cube
											- for (var i = 0; i < 5; ++i)
												.face
											.cube
												- for (var i = 0; i < 5; ++i)
													.face
												.cube
													- for (var i = 0; i < 5; ++i)
														.face
													.cube
														- for (var i = 0; i < 5; ++i)
															.face

input(type="button" value="pause" class="button")
View Compiled
//////////////////////////////
// VARS
//////////////////////////////

// cube size
$cube-width: 300px;
$cube-height: 28px;

// size of the faces borders
$face-border-size: 4px;


//////////////////////////////
// CODE
//////////////////////////////

body {
	width: 100vw; height: 100vh;
	background-color: #333;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#wrapper {
	transform-style: preserve-3d;
  transform: rotateX(-20deg) scale(0.75);
	transition: 3s;
	
	&:hover {
		transform: rotateX(20deg) scale(0.75);
	}
}

@keyframes rotate {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

.cube {
  width: $cube-width;
  transform-style: preserve-3d;
  animation: 60s rotate linear infinite;
}

.face {
  width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border: $face-border-size solid black;
  background-color: #fff;
}

.face:nth-child(1) {
	height: $cube-width;
	position: absolute;
	transform: rotateX(90deg) translateZ(calc(#{$cube-width} / 2));
}

.face:nth-child(2){
	height: $cube-height;
	margin-bottom: -#{$cube-height};
	transform: rotateX(180deg) translateZ(calc(#{$cube-width} / 2));
}

.face:nth-child(3) {
	height: $cube-height;
	margin-bottom: -#{$cube-height};
  transform: rotateY(-90deg) translateZ(calc(#{$cube-width} / 2));
}

.face:nth-child(4) {
	height: $cube-height;
	margin-bottom: -#{$cube-height};
  transform: rotateY(90deg) translateZ(calc(#{$cube-width} / 2));
}

.face:nth-child(5) {
	height: $cube-height;
	transform: translateZ(calc(#{$cube-width} / 2));
}

.button {
	z-index: 10;
	margin-top: 50px;
}

.pause {
	animation-play-state: paused;
}
View Compiled
$('.button').click(function() {
	$('.cube').toggleClass('pause');
	
	if ($(this).val() == 'pause') {
		$(this).val('play');
	} else {
		$(this).val('pause');
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js