How to create a sphere in css?

Question

I have trying to create a 3D sphere using just pure css, but I've been unable to generate the shape required. I've seen a cylinder but I can't find any reference to creating an actual sphere.

My current code looks like:

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}

<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>

however,

• A: these are just 2D circles, not 3D shapes
• B: I can't rotate these in 3d (I want to have a spinning image) similar to that of a globe.

Sorry if i missed anything, but I'm not too sure where I should go to ask this.

Answer 1

The below answer is not an actual 3D shape. It only gives a slight illusion of being 3D, however, depending on your use case, you may be able to 'fake' it:

html,body{margin:0;padding:0;background:#222;}
div{
    height:300px;
    width:300px;
    background:url(http://lorempixel.com/300/300);
    border-radius:50%;
    animation:spin 3s linear infinite;
    transform:rotate(-15deg);
    position:relative;
}
div:before{
    content:"";
    position:absolute;
    bottom:-50px;
    border-radius:50%;
    left:0;
    height:10%;
    width:100%;
    transform:rotate(15deg);
    background:rgba(0,0,0,0.6);
    box-shadow: 0 0 10px 2px rgba(0,0,0,0.6);
    
}
div:after{
    content:"";
    position:absolute;z-index:12;
    top:0;left:0;height:100%;width:100%;border-radius:50%;
box-shadow:inset -20px -20px 20px 2px #222, inset 20px 20px 20px 5px rgba(200,200,200,0.4);    
}
@keyframes spin{
    to{background-position:-300px 0;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>

It's animating the background-position of the div, and by using box shadows, you could 'mimic' the shadowing of a 3D shape.

Answer 2

You might want to use 3D rotated circles:

This uses rotated circles to look like a spherical grid. the lesser no. of elements, the better performance.

Some elements have been rotated in X axis, and others in Y axis. I have filled different colours to show this:

#cont {
  perspective: 10000px;
  transform-style: preserve-3d;
  -webkit-animation: rotat 1s linear infinite;
  animation: rotat 10s linear infinite;
  transform-origin: 50% 50% 50%;
}
.circ {
  height: 200px;
  width: 200px;
  border: 2px solid black;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -100px;
  transform-origin: 50%;
  transform-style: preserve-3d;
  background: orange;
}
.circ:nth-child(1) {
  transform: rotateX(0deg);
}
.circ:nth-child(2) {
  transform: rotateX(30deg);
}
.circ:nth-child(3) {
  transform: rotateX(60deg);
}
.circ:nth-child(4) {
  transform: rotateX(90deg);
}
.circ:nth-child(5) {
  transform: rotateX(120deg);
}
.circ:nth-child(6) {
  transform: rotateX(150deg);
}
.circ:nth-child(7) {
  transform: rotateX(180deg);
}
/*other side rotated*/

.circ:nth-child(8) {
  transform: rotateY(30deg);
}
.circ:nth-child(9) {
  transform: rotateY(60deg);
}
.circ:nth-child(10) {
  transform: rotateY(90deg);
}
.circ:nth-child(11) {
  transform: rotateY(120deg);
}
.circ:nth-child(12) {
  transform: rotateY(150deg);
}
.circ:nth-child(13) {
  transform: rotateY(180deg);
}
.oth {
  background: crimson;
}
@-webkit-keyframes rotat {
  0% {
    -webkit-transform: rotateY(0deg) translateX(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
  }
}
@keyframes rotat {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

<div id="cont">
  <div class="circ"></div>
  <div class="circ"></div>
  <div class="circ"></div>
  <div class="circ"></div>
  <div class="circ"></div>
  <div class="circ"></div>
  <div class="circ"></div>
  <!--rotated other side-->
  <div class="circ oth"></div>
  <div class="circ oth"></div>
  <div class="circ oth"></div>
  <div class="circ oth"></div>
  <div class="circ oth"></div>
  <div class="circ oth"></div>
</div>

You can also rotate some elements in Z direction, but that will make it even more buggy. Now if you fill the same colours in circles, it almost looks like a sphere:

#cont {
  perspective: 10000px;
  transform-style: preserve-3d;
  -webkit-animation: rotat 1s linear infinite;
  animation: rotat 10s linear infinite;
  transform-origin: 50% 50% 50%;
}
.circ {
  height: 200px;
  width: 200px;
  border: 2px solid black;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -100px;
  transform-origin: 50%;
  transform-style: preserve-3d;
  background: crimson;
}
.circ:nth-child(1) {
  transform: rotateX(0deg);
}
.circ:nth-child(2) {
  transform: rotateX(30deg);
}
.circ:nth-child(3) {
  transform: rotateX(60deg);
}
.circ:nth-child(4) {
  transform: rotateX(90deg);
}
.circ:nth-child(5) {
  transform: rotateX(120deg);
}
.circ:nth-child(6) {
  transform: rotateX(150deg);
}
.circ:nth-child(7) {
  transform: rotateX(180deg);
}
/*other side rotated*/

.circ:nth-child(8) {
  transform: rotateY(30deg);
}
.circ:nth-child(9) {
  transform: rotateY(60deg);
}
.circ:nth-child(10) {
  transform: rotateY(90deg);
}
.circ:nth-child(11) {
  transform: rotateY(120deg);
}
.circ:nth-child(12) {
  transform: rotateY(150deg);
}
.circ:nth-child(13) {
  transform: rotateY(180deg);
}
.o {
  border: none;
}
@-webkit-keyframes rotat {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
  }
}
@keyframes rotat {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

<div id="cont">
  <div class="circ"></div>
  <div class="circ"></div>
  <div class="circ"></div>
  <div class="circ"></div>
  <div class="circ"></div>
  <div class="circ"></div>
  <div class="circ"></div>
  <!--rotated other side-->
  <div class="circ o"></div>
  <div class="circ o"></div>
  <div class="circ o"></div>
  <div class="circ o"></div>
  <div class="circ o"></div>
  <div class="circ o"></div>
</div>