<div>
  <p>
    <span></span>
  </p>
</div>

<footer>To see smooth animation, try Chrome 63+ with the Experimental Web Platform Features flag enabled inside <code>chrome://flags</code></footer>

div, p, span {
  animation: custom-prop-o-rama 8300ms alternate infinite ease-in-out;
  transition: --rz1 600ms ease-in-out;
}
body:hover p {
  --rz1: -350deg;
}

@keyframes custom-prop-o-rama {
  33% {
    --rx1: 20deg;
    --ry1: -303deg;
  }
  50% {
    --rx1: -20deg;
    --ry2: -30deg;
  }
  67% {
    --rx2: -200deg;
    --ry2: 130deg;
    --rz2: -350deg;
  }
}

div {
  --size: 50vmin;
  
  transform: 
    rotateX(var(--rx1))
    rotateY(var(--ry2))
    rotateZ(var(--rz1))
    rotateZ(var(--rz2))
    rotateX(var(--rx2))
    rotateY(var(--ry1));
}


p {
  --size: 36vmin;
  --border-size: 2.5vmin;
  --color: 188;
  
  transform:
    rotateX(var(--rx1))
    rotateY(calc(var(--ry1) * 2))
    rotateZ(var(--rz1))
    rotateY(var(--ry2));
}


span {
  --size: 24.5vmin;
  --border-size: 2vmin;
  --color: 36;
  
  transform:
    rotateX(var(--rx2))
    rotateY(var(--ry2))
    rotateZ(var(--rz2))
    rotateZ(var(--rz1))
    rotateX(var(--rx1))
    rotateY(var(--ry1));
}



body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle, hsl(188, 8%, 8%),hsl(188, 12%, 15%));
  perspective: 80vmax;
  
  font-family: system-ui, 'Segoe UI', sans-serif;
  line-height: 1.4;
  text-align: center;
}
*, *::before, *::after {
  box-sizing: border-box;
}

footer {
  color: #fafdff;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
}
.supported footer {
  display: none;
}


div, p, span {
  border-radius: 5%;
  width: var(--size);
  height: var(--size);
  border: var(--border-size, 3vmin) solid hsl(var(--color, 343), 94%, 54%);
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  transform-style: preserve-3d;
  will-change: transform;
  /* should will-change be on the custom properties now? */
}

if (window.CSS && CSS.registerProperty) {
  document.documentElement.classList.add('supported');
  
  ['x1','x2','y1','y2','z1','z2']
    .forEach(prop => {
      CSS.registerProperty({
        name: `--r${prop}`,
        syntax: '<angle>',
        inherits: false,
        initialValue: '0deg'
      });
    });
}