3d axis spinner

index.pug

div.loader
	div.centre
	div.top
	div.bottom
	div.left
	div.right
	div.front
	div.back

playground.json

{
  "scripts": [
    "jquery"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

script.ts

let angles = {x:0,y:0,z:0}

setInterval(function(){
	angles = {x: angles.x + Math.floor(Math.random()*7)-3, y: angles.y + Math.floor(Math.random()*7)-3, z: angles.z + Math.floor(Math.random()*7)-3}
	$(".loader").css({"--rotation-x": `${angles.x*90}deg`,"--rotation-y": `${angles.y*90}deg`,"--rotation-z": `${angles.z*90}deg`})
}, 1000)

style.scss

$transitionTime:.75s;

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	perspective: 50rem;
	.loader {
		--size:2rem;
		--radius:6rem;
		--rotation-x:0deg;
		--rotation-y:0deg;
		--rotation-z:0deg;

		position: relative;
		//transform: rotateX(45deg) rotateZ(45deg);
		transform: translate(calc(var(--size)/-2), calc(var(--size)/-2)) rotateX(var(--rotation-x)) rotateY(var(--rotation-y)) rotateZ(var(--rotation-z));
		transition:$transitionTime;
		transform-style: preserve-3d;
		transform-origin: 1rem 1rem;
		//animation: spin 1s ease infinite;
		@keyframes spin {
			0%, 100% {
				--rotation-x:0deg;
				--rotation-y:0deg;
				--rotation-z:0deg;
			}
			50% {
				--rotation-x:90deg;
				--rotation-y:90deg;
				--rotation-z:90deg;
			}
		}
		>div {
			--pos-x:0;
			--pos-y:0;
			--pos-z:0;
			position: absolute;
			width:var(--size);
			height:var(--size);
			background:black;
			border-radius: 100%;
			&.top {
				--pos-y:-1;
				background:red;
			}
			&.bottom {
				--pos-y:1;
				background:yellow;
			}
			&.left {
				--pos-x:-1;
				background:green;
			}
			&.right {
				--pos-x:1;
				background:cyan;
			}
			&.front {
				--pos-z:1;
				background:blue;
			}
			&.back {
				--pos-z:-1;
				background:magenta;
			}
			//translate(calc(var(--pos-x) * var(--radius)), calc(var(--pos-y) * var(--radius)), calc(var(--pos-y) * var(--radius)))
			transform:translate3d(calc(var(--pos-x) * var(--radius)),calc(var(--pos-y) * var(--radius)),calc(var(--pos-z) * var(--radius))) rotateX(calc(var(--rotation-x) * -1)) rotateY(calc(var(--rotation-y) * -1)) rotateZ(calc(var(--rotation-z) * -1));
			transition:$transitionTime;
		}
	}
}