Esfera Fibonacci usando transformaciones CSS3

Hace ya un tiempo que no cuelgo ningún post, el proyecto en el que estoy inmerso me consume mucho tiempo, pero esto no evita que experimente un poco con algunas de las cosas que me apasionan.

He querido comprobar el rendimiento de los principales navegadores al usar transformaciones CSS3. En este pequeño experimento, se transforman en cada movimiento del ratón 300 elementos ubicados en el documento. He utilizado un cálculo Fibonacci para crear una esfera formada por puntos equidistantes entre sí (conocida como esfera Fibonacci), intentando simular con la escala y la opacidad de los mismos cierta profundidad. Increíblemente el rendimiento es bastante bueno, pueden comprobarlo por vosotros mismos. A continuación dejo el código utilizado:

Para este experimento se ha usado el método querySelectorAll y transformaciones CSS3, por lo que si usas Internet Explorer, debes usar una versión a partir de la 9 en adelante.

HTML

<div id="canvas">
  
</div>

CSS (usando autoprefixer)

body, html{
  height: 100%;
  position: relative;
}

body{
  background-color: #232B2B;
  margin: 0;
  padding: 0;
}

#canvas{
  height: 250px;
  margin: 0 auto;
  perspective: 2000px;
  perspective-origin: center center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 250px;
}

.point{
  background: #E87A24;
  border-radius: 50%;
  height: 4px;
  position: absolute;
  transform-style: preserve-3d;
  width: 4px;
}

JavaScript

var cant = 300;
var offset = 2 / cant;
var increment = Math.PI * (3 - Math.sqrt(5));
var canvas = document.getElementById("canvas");

var i;
var circle;

//---Build the elements
for(i = 0; i < cant; i++){
  
  circle = document.createElement("div");
  circle.className = "point";
  circle.setAttribute("data-index", i);
  
  canvas.appendChild(circle);
  
};

//---Apply transformations to points
function updatePoints(evt){
  
  var x, y, z, r, a, scale, opacity, point, style;
  
  var angle = (evt) ? (-evt.pageX / 4) * Math.PI / 180 : 0;
  
  for(i = 0; i < cant; i++){

    y = (i * offset - 1) + (offset / 2);
    r = Math.sqrt(1 - Math.pow(y, 2));
    a = ((i + 1) % cant) * increment + angle;
    x = Math.cos(a) * r;
    z = Math.sin(a) * r;

    scale = Math.round(z * 20000) / 100;
    opacity = (1 + z) / 1.5;
    
    style = "translate3d(" + (125 + x * 100) + "px, " + (125 + y * 100) + "px, " + scale + "px)";
    
    point = canvas.querySelectorAll("[data-index='" + i +"']");
    point[0].style.WebkitTransform = style;
    point[0].style.msTransform = style;
    point[0].style.transform = style;
    point[0].style.opacity = opacity;

  }
  
}

//---Update the points at start
updatePoints();

//---Update the points on mouse move
document.addEventListener("mousemove", updatePoints);

A continuación pueden ver una muestra del resultado en CodePen. La esfera Fibonacci se conformará con un ángulo diferente si movemos el ratón por el documento.

Esfera Fibonacci, resultado final

See the Pen by (@elchininet) on CodePen.3

(3 votos, promedio: 4,67 de 5)