<div class="card">
  <div class="content">
    <svg viewBox="-500 -500 1000 1000">
      <circle r="450"></circle>
      <circle class="equator" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
      <circle class="meridian" r="450"></circle>
    </svg>
  </div>
</div>
*{margin:0;padding:0;}

body {
  background:#05070b;
}
.card {
  overflow: hidden;
}
.content{ 
  display: flex;
  margin-top: 10vh;
  justify-content: space-around;
}
svg{  
  height:400px;
  width:400px;
  overflow: hidden;
}
circle {
  stroke: #ff002b;
  stroke-width: 2px;
  fill: none;
}

.equator {
  -webkit-transform: rotateZ(-20deg) rotateX(125deg);
          transform: rotateZ(-20deg) rotateX(125deg);
}

.meridian {
  -webkit-animation: turn 0.5s infinite linear;
          animation: turn 0.5s infinite linear;
}
.meridian:nth-child(1) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(15deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(15deg);
}
.meridian:nth-child(2) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(30deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(30deg);
}
.meridian:nth-child(3) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(45deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(45deg);
}
.meridian:nth-child(4) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(60deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(60deg);
}
.meridian:nth-child(5) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(75deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(75deg);
}
.meridian:nth-child(6) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(90deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(90deg);
}
.meridian:nth-child(7) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(105deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(105deg);
}
.meridian:nth-child(8) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(120deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(120deg);
}
.meridian:nth-child(9) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(135deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(135deg);
}
.meridian:nth-child(10) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(150deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(150deg);
}
.meridian:nth-child(11) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(165deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(165deg);
}
.meridian:nth-child(12) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(180deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(180deg);
}
.meridian:nth-child(13) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(195deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(195deg);
}
.meridian:nth-child(14) {
  --target: 180deg / $count * ($i + 1);
  -webkit-transform: rotateZ(-20deg) rotateX(35deg) rotateY(210deg);
          transform: rotateZ(-20deg) rotateX(35deg) rotateY(210deg);
}
// Thanks to Pavel Dobryakov //

const ANGLE = 40;

let card = document.querySelectorAll(".card");

card.forEach((element, i) => {
	floatable(element);
});

function floatable (panel) {
	let content = panel.querySelector(".content");
	panel.addEventListener('mouseout', e => {
		content.style.transform = `perspective(400px)
								   rotateX(0deg)
								   rotateY(0deg)
								   rotateZ(0deg)
                    translateZ(40px)`;
    content.style.transition = `all 2s linear`;
	});

	panel.addEventListener('mousemove', e => {
		let w = panel.clientWidth;
		let h = panel.clientHeight;
		let y = (e.offsetX - w * 0.5) / w * ANGLE;
		let x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;

		content.style.transform = `perspective(400px)
								   rotateX(${x}deg)
								   rotateY(${y}deg)`;
	});
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.