A CodePen by Marcelo Mizuno. Fake sphere - A little 3D experiment using css3 transform in the XYZ axis.

index.html

<div class="wrap">
    <div class="inner"></div>
  <div class="x">
    <div class="x1"></div>
    <div class="x2"></div>
    <div class="xInner"></div>
    <div class="y"></div>
    <div class="y1"></div>
    <div class="y2"></div>
    <div class="yInner"></div>
    <div class="z"></div>
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="zInner"></div> 
  </div>
</div>

style.css

* {
  box-sizing: border-box;
}
body {
  background: #000;
}
div {
}
.wrap {
  box-sizing: border-box;
  margin: 100px auto;
  position: relative;
}
.wrap, .x, .y, .z {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.x {
  position: relative;
  transform-style: preserve-3d;
  animation:mymove 10s linear infinite;
  border: 1px solid #FF0099;
}
.x1, .x2, .y, .y1, .y2, .z, .z1, .z2 , .xInner , .yInner , .zInner {
  position: absolute;
}
.y {
  transform:  rotateX(90deg);
  border: 2px solid #0099FF;
  top:0;
  left:0;
}
.z {
  transform:  rotateY(90deg);
  border: 1px solid #FFCC33;
  top:0;
  left:0;
}
.x1, .x2, .y1, .y2, .z1, .z2 {
  width: 87.5%;
  height: 87.5%;
  border-radius: 50%;
}
.x1 {
  top:6.25%;
  left:6.25%;
  transform: translateZ(50px);
  border: 1px solid #FF0099;
}
.x2 {
  transform:  rotateX(180deg) translateZ(50px);
  top:6.25%;
  left:6.25%;
  border: 1px solid #FF0099;
}
.y1 {
  transform: rotateX(90deg) translateZ(50px);
  top:6.25%;
  left:6.25%;
  border: 1px solid #0099FF;
}
.y2 {
  transform:  rotateX(270deg) translateZ(50px);
  top:6.25%;
  left:6.25%;
  border: 1px solid #0099FF;
}
.z1 {
  top:6.25%;
  left:6.25%;
  transform: rotateY(90deg) translateZ(50px);
  border: 1px solid #FFCC33;
}
.z2 {
  top:6.25%;
  left:6.25%;
  transform:  rotateY(270deg) translateZ(50px);
  border: 1px solid #FFCC33;
}
.xInner {
  border: 1px solid #FF0099;
  width: 100%;
  top:50%;
}
.yInner {
  transform: rotateX(90deg);
  border: 2px solid #FF0099;
  height: 100%;
  left:50%;
  border: 1px solid #0099FF;
}
.zInner {
  transform: rotateY(90deg);
  height: 100%;
  left:50%;
  border: 1px solid #FFCC33;
}
@keyframes mymove
{
100% {
  transform:  rotateX(360deg) rotateY(360deg)}
}