Atomo con animacion CSS3

He aqui un claro ejemplo de los avances y posibilidades que da el CSS3 hoy en dia, tanto en diseño como en la parte de animacion. Este atomo gigante no contiene ninguna imagen (como ya he comentado, esta todo hecho con codigo CSS3), los electrones giran a su alrededor y al pasar el cursor por encima, este se ve en modo plano tipo sistema solar.

ver el codigo utilizado

<div style="background-color: #3e3b66;
  background-image: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #3e3b66), color-stop(100%, #000000));
  background-image: -webkit-radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);
  background-image: -moz-radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);
  background-image: -o-radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);
  background-image: radial-gradient(center, ellipse cover, #3e3b66 0%, #000000 100%);position: relative;height: 500px;width: 100%;">

<atom><div class="center"></div><div class="atomo1"><div></div></div><div class="atomo2"><div></div></div><div class="atomo3"><div></div></div></atom></div>

<style>
[class*="atomo"], .center {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}
atom {
  cursor: pointer;
}

[class*="atomo"] {
  animation: glow 3s linear infinite;
  border-radius: 50%;
  border: 0.6em solid rgba(255, 255, 255, 0.8);
  border-top: 1.5em solid rgba(255, 255, 255, 0.8);
  border-bottom: 1.5em solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.3);
  height: 30em;
  transition: 1s transform ease-in-out;
  width: 30em;
}
[class*="atomo"] div {
  animation: rotate 2s linear infinite;
  border-radius: 50%;
  height: 100%;
  position: relative;
  width: 100%;
}
[class*="atomo"] div:after {
  animation: squash 2s linear infinite;
  -webkit-transform: scale(3, 1);
  -moz-transform: scale(3, 1);
  -ms-transform: scale(3, 1);
  -o-transform: scale(3, 1);
  transform: scale(3, 1);
  border-radius: 50%;
  content: '';
  left: 50%;
  height: 3em;
  margin-left: -1.5em;
  opacity: 0.8;
  position: absolute;
  top: -1.2em;
  width: 3em;
}

.atomo1 {
  transform: rotate(120deg) scale(0.333, 1);
}
.atomo1 div:after {
  background: #2ecc71;
  box-shadow: 0 0 20px #2ecc71;
}
atom:hover .atomo1 {
  border: 0.6em solid rgba(255, 255, 255, 0.8);
  transform: rotate(0deg) scale(0.33333, 0.33333) perspective(600px) rotateX(60deg);
}
atom:hover .atomo1 div:after {
  animation: none;
  top: -1.6em;
  transform: scale(1, 1);
}

.atomo2 {
  transform: rotate(240deg) scale(0.333, 1);
}
.atomo2 div:after {
  background: #3498db;
  box-shadow: 0 0 20px #3498db;
}
atom:hover .atomo2 {
  border: 0.6em solid rgba(255, 255, 255, 0.8);
  transform: rotate(0deg) scale(0.66667, 0.66667) perspective(600px) rotateX(60deg);
}
atom:hover .atomo2 div:after {
  animation: none;
  top: -1.6em;
  transform: scale(1, 1);
}

.atomo3 {
  transform: rotate(360deg) scale(0.333, 1);
}
.atomo3 div:after {
  background: #e74c3c;
  box-shadow: 0 0 20px #e74c3c;
}
atom:hover .atomo3 {
  border: 0.6em solid rgba(255, 255, 255, 0.8);
  transform: rotate(0deg) scale(1, 1) perspective(600px) rotateX(60deg);
}
atom:hover .atomo3 div:after {
  animation: none;
  top: -1.6em;
  transform: scale(1, 1);
}
.center {
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  height: 3em;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.3);
  transition: 1s transform ease-in-out;
  width: 3em;
}
atom:hover .center {
  transform: translate(0, 0.5em);
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes squash {
  0%,50%, 100% {
    transform: scale(1, 1);
    top: -2.6em;
  }

  25%, 75% {
    transform: scale(2, 1);
    top: -1.2em;
  }
}
</style>