JSFiddle - React, Tailwind, and code Playground

by flackend

HTML

<div class="container">

    <div class="hero-unit">
        <h1>Affine Rotation</h1>
        <p>Rotate a geometry around an x, y point, including the centroid (common centre).</p>
    </div>

    <div class="row">
        <div class="span6">
            <div class="input-prepend">
                <span class="add-on">originX</span><input type="text" name="originX">
            </div>
            <div class="input-prepend">
                <span class="add-on">originY</span><input type="text" name="originY">
            </div>
            <div class="input-prepend">
                <span class="add-on">rotAngle</span><input type="text" name="rotAngle">
            </div>
            <button class="btn btn-primary">submit</button>
        </div>
        <div class="span6" id=result>
        </div>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

body { padding: 20px }

JavaScript

$(function() {

    $('button').on('mousedown', getTransform);
    
    function getTransform(e) {

        $('table').remove();
        $('#result').append(
'<table class="table table-bordered">'+
'    <thead>'+
'        <tr>'+
'            <th>Property</th>'+
'            <th>Value</th>'+
'        </tr>'+
'    </thead>'+
'    <tbody>'+
'    </tbody>'+
'</table>');
        
        e.preventDefault();

        var originX = $('input[name="originX"]').val(),
            originY = $('input[name="originY"]').val(),
            rotAngle = $('input[name="rotAngle"]').val(),
            a = rotAngle * Math.PI / 180,
        data = new Object();
        data.scaleX = Math.cos(a);
        data.scaleY = Math.cos(a);
        data.rotX = Math.sin(a);
        data.rotY = Math.sin(-a);
        data.transX = originX - Math.cos(a) * originX + Math.sin(a) * originY;
        data.transY = originY - Math.sin(a) * originX - Math.cos(a) * originY;
        var table = new String;

        $.each(data, function(property, value) {
            table += '<tr><td>'+ property +'</td><td>' + value +'</td></tr>';
        });
        $('table tbody').append(table);
        
        return false;
    }
});