CSS3 Rotation

Get the rotation item edge.

HTML

<div id="main" role="main">
    <div class="poladroid">
        <div class="photo">&nbsp;</div>
        <div class="lomography shadow">&nbsp;</div>
        <div class="lomography colorbox">&nbsp;</div>
        <div class="lomography signature">
            <span>photo by hinddda</span>
        </div>
    </div>
</div>

CSS

#main {
    position: relative;
    margin: 50px 100px;
}
div.poladroid {
    position: absolute;
    width: 240px;
    height: 360px;
    overflow: hidden;
    border: 1px solid #acacac;
    background-color: #ffffff;
    z-index: 100;
    opacity: 0.8;
    border-radius: 10px;
    -webkit-radius: 10px;
    -moz-radius: 10px;
    box-shadow: 0px 0px 8px #999999;
    -webkit-box-shadow: 0px 0px 8px #999999;
}
div.poladroid > div.lomography {
    position: absolute;
    background-color: #ffffff;
    border: 0;
    margin: 0;
    padding: 0;
}
div.poladroid > div.shadow {
    top: 25px;
    left: 15px;
    right: 15px;
    bottom: 70px;
    background: -moz-radial-gradient(center 45deg, circle closest-corner, transparent 0%, #000000 200%);
    background: -webkit-gradient(radial, center center, 0, center center, 165, from(transparent), to(#000000));
}
div.poladroid > div.colorbox {
    top: 25px;
    left: 15px;
    right: 15px;
    bottom: 70px;
    opacity: 0.2;
    background-color: #0033ff;
}
div.poladroid > div.photo {
    position: absolute;
    top: 25px;
    left: 15px;
    right: 15px;
    bottom: 70px;
    background-color: #ffffff;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: 1px solid #000000;
}
div.poladroid > div.signature {
    bottom: 20px;
    right: 10px;
}

JavaScript

$(document).ready(function() {
    var angle = 40;
    var poladroid = $('div.poladroid'),
        main = $('#main'),
        shift = (angle - (angle % 90)) / 90 + 1;

    $('<div/>').addClass('pointer').css({
        position: 'absolute',
        top: 0,
        left: 0,
        width: 2,
        height: 2,
        'border': '1px solid #ff3300'
    }).appendTo(main);


    switch (shift) {
    case 1:
        beta = angle;
        break;
    case 3:
        beta = Math.abs(180 - angle);
        break;
    case 2:
        beta = 180 - angle;
        break;
    case 4:
        beta = 360 - angle;
        break;
    }

    var w = 240,
        h = 360,
        l = Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2)) / 2,
        alpha = Math.acos((h / 2) / l) * 180 / Math.PI,
        theta = Math.abs(alpha - beta),
        gamma = 90 - alpha - beta,
        Y = Math.cos(theta / 180 * Math.PI) * l,
        X = Math.cos(gamma / 180 * Math.PI) * l,
        dX = X - (w / 2),
        dY = Y - (h / 2);

    $('div.pointer').css({
        height: Y * 2,
        width: X * 2,
        top: -dY,
        left: -dX
    });

    poladroid.clone().css({
        'width': 240,
        'height': 360,
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-moz-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    }).appendTo(main);

    $('div.poladroid').draggable({
        stack: '.poladroid'
    });
});