I'm experimenting with javascript and css rotating divs with letters because some rotate well and others abruptly

rotar = 20;
rotar2 = 20;
var kill, tipoTransformacion = [],
    _zoom = 100,
    tipoLetra = [];

function n(x) {
    return parseFloat($("#" + x).val());
}

function play() {
    clearInterval(kill);

    txt = $("#texto").val();
    ponerTotal = "";
    tipoLetra = [];

    for (i = 0; i < txt.length; i++) {
        poner = txt[i];
        if (poner == " ") {
            tipoLetra[i] = 0;
            ponerTotal += '<div style="float: left; width: 15px; margin-bottom: 10px;"> &nbsp; </div><div style="float:left;"></div>';
        } else {
            tipoLetra[i] = 1;
            ponerTotal += '<div id="t_${i}" class="letra" style="float: left; width: 16px; margin-right: 0px; margin-left: 1px; margin-bottom: 10px;"> <b> ${poner} </b> </div>';

        }
    }
    $("#screen").html(ponerTotal);

    for (i = 0; i < txt.length; i++) {
        max = 1;
        if ($('#3dActivo').is(':checked')) max = 5;
        if (tipoLetra[i] == 0) tipoTransformacion[i] = -1;
        else tipoTransformacion[i] = _.random(0, max);
    }

    kill = setInterval(function() {
        rotar += n("rotaVal");
        rotar2 -= n("rotaVal");
        if (rotar >= 720) rotar = 0;
        if (rotar2 <= -720) rotar2 = 0;
        for (i = 0; i < txt.length; i++) {
            if (tipoTransformacion[i] == 0) $("#t_" + i).css("transform", "rotate(" + rotar + "deg)");
            if (tipoTransformacion[i] == 1) $("#t_" + i).css("transform", "rotate(" + rotar2 + "deg)");
            if (tipoTransformacion[i] == 2) $("#t_" + i).css("transform", "rotateX(" + rotar + "deg)");
            if (tipoTransformacion[i] == 3) $("#t_" + i).css("transform", "rotateX(" + rotar2 + "deg)");
            if (tipoTransformacion[i] == 4) $("#t_" + i).css("transform", "rotateY(" + rotar + "deg)");
            if (tipoTransformacion[i] == 5) $("#t_" + i).css("transform", "rotateY(" + rotar2 + "deg)");
        }
    }, n("velVal"));
    console.log(tipoTransformacion);
}

play();

<!-- jQuery y Underscore.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>

<!-- HTML -->
<textarea rows="6" cols="30" id="texto" style="font-family: monospace;">El presidente de Colombia, Juan Manuel Santos, y el líder de las Fuerzas Armada Revolucionarias de Colombia (FARC), Rodrigo Echeverri Londoño, alias 'Timochenko', han sellado esta madrugada el acuerdo cerrado en agosto tras cuatro años de negociaciones que pone fin a la guerra más longeva del hemisferio occidental.</textarea>
<br> &nbsp;
<a href="#" onclick="play();" id="play-btn" class="control-btn">play</a> &nbsp;
<a href="#" onclick="$('#texto').val('');" class="control-btn">clear text</a>
<select id="rotaVal">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15" selected>15</option>
    <option value="20">20</option>
    <option value="25">25</option>
</select>
<select id="velVal" onchange="play();">
    <option value="50">25</option>
    <option value="50">50</option>
    <option value="100" selected>100</option>
    <option value="200">200</option>
    <option value="300">300</option>
    <option value="400">400</option>
</select>
3D
<input type="checkbox" id="3dActivo" onclick="play();" checked> &nbsp;
<a href="#" onclick="alert('Hola');" class="control-btn">[?]</a>
<br>
<br>
<div id="screen" style="width: 800px;"></div>