JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<div id ="capa">
    <p>Tonto el que lo lea</p>
</div>

CSS

#capa { position:absolute; top:0px; left:0px; width: 80px; height: 80px; background-color: orange; color: white; text-align:center; }

JavaScript

Object.prototype.extender = function(otro) {
    var indefinido;
    for (var x in this) {
        if (otro[x] !== indefinido) {
            this[x] = otro[x];
        }
    }
};

function Girador(elemento, opciones) {
    this.elemento = elemento;
    this.angulo = 0;
    this._default = {
        x_giro: 0,
        y_giro : 0,
        distancia : 50,
        timeout : 10,
        velocidad_giro : 0.04,
        giro_interno : false
    }
    
    if (opciones) {
        this._default.extender(opciones);
    }
    
    this.girar();
}

Girador.prototype.girar = function(){
    
    this.angulo += this._default.velocidad_giro;
    var x = Math.sin(this.angulo) * this._default.distancia + this._default.x_giro;
    var y = Math.cos(this.angulo) * this._default.distancia + this._default.y_giro;
    var angulo = (this._default.giro_interno) ? Math.atan2(y - this._default.y_giro, x - this._default.x_giro) : 0;
    
    this.estilos(x, y, angulo);
    
    var self = this;
    setTimeout(
        function(){
            self.girar();
        },
        this._default.timeout
    );
}

Girador.prototype.estilos = function(x, y ,angulo) {
    var estilo = this.elemento.style;
    estilo.left = x + 'px';
    estilo.top = y + 'px';
    estilo.transform = 'rotate(' + angulo + 'rad)';
}

window.onload= function(){
    var capa_giradora = document.getElementById('capa');
    var mis_opciones = {
        x_giro: 200,
        y_giro : 200,
        distancia : 100,
        giro_interno: true
    };
    
    var girador = new Girador(capa_giradora, mis_opciones);
}