JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="text" class="xrot rot" name="xrot" value="0" />X rotation (pitch)
    <br />
    <input type="text" class="yrot rot" name="yrot" value="0" />Y rotation (yaw)
    <br />
    <input type="text" class="zrot rot" name="zrot" value="0" />Z rotation (roll, <small>doesn't affect anything</small>)
    <br />
    <input type="text" class="offset rot" name="offset" value="5" />Offset (speed)
    <br />
    <button name="submit" type="submit" class="button">Calculate</button>

    <hr />

    change X: <input disabled="disabled" type="text" class="xpos output" name="xpos" value="" />
    change Y: <input disabled="disabled" type="text" class="ypos output" name="ypos" value="" />
    change Z: <input disabled="disabled" type="text" class="zpos output" name="zpos" value="" />

</div>

CSS

body * { font-family:"Trebuchet MS", Arial, Times New Roman, sans-serif; line-height:20px; }
.rot {
    width:50px;
    margin-right:10px;
    text-align:right;
}

.button {
    width:75px;
    margin:5px;
    margin-left:50px;
}
.button:hover { cursor:pointer; }

.output {
    display:inline-block;
    width:50px;
    margin-left:5px;
    margin-right:10px;
    border:none;
    border-bottom:1px solid #CCC;
    background:#FFF;
    outline:none;
    text-align: center;
}
small {
    font-size:9px;
}
}

JavaScript

$('.button').click(function(){
    calculate(); 
});


var calculate = function()
{ 
    var xrot,yrot,zrot,xpos,ypos,zpos,offset,place;
    
    place = 10000; //rounds to 4 decimals
        
    // Get and store user inputs, converting the string values to floats
    xrot     = parseFloat($('.xrot').val());        
    yrot     = parseFloat($('.yrot').val());        
    zrot     = parseFloat($('.zrot').val());
    offset   = parseFloat($('.offset').val());
    
    // Calculate the new position of the camera    
    xpos     =  Math.sin(toRad(yrot)) * offset;    
    ypos     = -Math.sin(toRad(xrot)) * offset;    
    zpos     =  Math.cos(toRad(yrot)) * offset;
    
    // Show the rounded results
    $('.xpos').val(Math.round(xpos*place)/place);    
    $('.ypos').val(Math.round(ypos*place)/place);    
    $('.zpos').val(Math.round(zpos*place)/place);
}

// Convert degrees to radians
var toRad = function(degree)
{
    return degree *  0.0174532925;
}

//run with default values

calculate();