Как создать 3d сферу в css?

1

<div class="sphere"></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

.sphere {
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 800px;
  transform-style: preserve-3d;
  animation: rotate 6s infinite linear;
}

.sphere::before, .sphere::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ff0000;
  opacity: 0.8;
}

.sphere::before {
  transform: rotateX(90deg) translateZ(100px);
}

.sphere::after {
  transform: rotateY(90deg) translateZ(100px);
}

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