wp-red-orbital/src/style.scss

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-red-block-red-orbital {
	--width__inner-content: 11em;
	--width__orbiter: 7.5em;

	--radius: 14em;

	--duration__rotation: 50s;
	--duration__image-hover: 0.3s;

	position: relative;
	width: 80vw;
	height: 80vh;
	overflow: hidden;

	font-size: 1rem;

	ul,
	li {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.orbiters {
		--count__orbiters: 4;
		@for $i from 1 through 12 {
			&.count-#{$i} {
				--count__orbiters: #{$i};
			}
		}

		position: relative;
		width: 0;
		height: 0;
		left: 50%;
		top: 50%;
	}

	.orbiter {
		position: absolute;
		width: var(--width__orbiter);
		height: var(--width__orbiter);
		border-radius: 50%;
		left: 50%;
		top: 50%;
		transform: translate(
			calc(-50% + var(--x-offset)),
			calc(-50% - var(--y-offset))
		);
	}

	.orbiter {
		/* --angle must be in radians so multiply by 2 * pi  */
		--angle: calc(6.2831853036 * var(--index) / var(--count__orbiters));

		/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
		--sin-term1: var(--angle);
		--sin-term2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);
		--sin-term3: calc(
			(var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) /
				120
		);
		--sin-term4: calc(
			(
					var(--angle) * var(--angle) * var(--angle) * var(--angle) *
						var(--angle) * var(--angle) * var(--angle)
				) / 5040
		);
		--sin-term5: calc(
			(
					var(--angle) * var(--angle) * var(--angle) * var(--angle) *
						var(--angle) * var(--angle) * var(--angle) * var(--angle) *
						var(--angle)
				) / 362880
		);
		--sin: calc(
			var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) +
				var(--sin-term5)
		);

		/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
		--cos-term1: 1;
		--cos-term2: calc((var(--angle) * var(--angle)) / 2);
		--cos-term3: calc(
			(var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 24
		);
		--cos-term4: calc(
			(
					var(--angle) * var(--angle) * var(--angle) * var(--angle) *
						var(--angle) * var(--angle)
				) / 720
		);
		--cos-term5: calc(
			(
					var(--angle) * var(--angle) * var(--angle) * var(--angle) *
						var(--angle) * var(--angle) * var(--angle) * var(--angle)
				) / 40320
		);
		--cos: calc(
			var(--cos-term1) - var(--cos-term2) + var(--cos-term3) - var(--cos-term4) +
				var(--cos-term5)
		);

		--x-offset: calc(var(--radius) * var(--cos));
		--y-offset: calc(var(--radius) * var(--sin));

		&:nth-child(1) {
			--index: 0;
		}
		&:nth-child(2) {
			--index: 1;
		}

		&:nth-child(3) {
			--index: -1;
		}
		&:nth-child(4) {
			--index: 2;
		}

		&:nth-child(5) {
			--index: -2;
		}
		&:nth-child(6) {
			--index: 3;
		}

		&:nth-child(7) {
			--index: -3;
		}
		&:nth-child(8) {
			--index: 4;
		}

		&:nth-child(9) {
			--index: -4;
		}
		&:nth-child(10) {
			--index: 5;
		}

		&:nth-child(11) {
			--index: -5;
		}
		&:nth-child(12) {
			--index: 6;
		}
	}

	.orbiter-content {
		width: 100%;
		height: 100%;
	}

	.inner-content {
		position: absolute;
		width: var(--width__inner-content);
		height: var(--width__inner-content);
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		border-radius: 3em;
		overflow: hidden;
	}

	.image-hover {
		width: 100%;
		height: 100%;

		& > .img {
			position: absolute;
			width: 100%;
			height: 100%;
			inset: 0;
			object-fit: cover;

			&:nth-child(2) {
				transition: opacity var(--duration__image-hover);
				opacity: 0;
			}
		}

		&:hover > .img {
			&:nth-child(2) {
				opacity: 1;
			}
		}
	}

	.content-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.orbiters:hover {
		&.clockwise,
		& .orbiter-content {
			animation-play-state: paused;
		}
	}

	.clockwise {
		animation: rotate var(--duration__rotation) linear infinite running;

		.orbiter-content {
			animation: rotate var(--duration__rotation) reverse linear infinite
				running;
		}
	}

	// TOOD set this with block variant
	.anti-clockwise {
		animation: rotate var(--duration__rotation) reverse linear infinite running;

		.orbiter-content {
			animation: rotate var(--duration__rotation) linear infinite running;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(360deg);
		}
	}
}