Compass

by realhunts

HTML

<figure id="compass">
    <div id="arrow"></div>
</figure>
<input id="degrees" type="number" value="0" min="0" max="360" step="30" maxlength="3" />

CSS

#compass {
    width: 380px;
    height: 380px;
    color: black;
    background-image:url('http://i.imgur.com/44nyA.jpg');
    position: relative;
}
#arrow {
    border-color: transparent gray transparent transparent;
    border-style: solid;
    border-width: 1px 180px 1px 0;
    height: 0;
    width: 0;
    position: absolute;
    left: 10px;
    top: 190px;
    -webkit-transform-origin: center right;
    -moz-transform-origin: center right;
    -ms-transform-origin: center right;
    transform-origin: center right;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}

JavaScript

$(function () {
    var degrees = function (deg) {
        var key = 'transform',
            val = 'rotate(' + deg + 'deg)';
        
        return {
            '-webkit-transform': val,
               '-moz-transform': val,
                '-ms-transform': val,
                    'transform': val
        };
    };
    
    $('#degrees').change(function () {
        var deg = parseInt($(this).val());
        if (deg >= 360) {
            deg = 0;
            $(this).val(0);
        }
        $('#arrow').css(degrees(deg));
    });
});