Transforma divs

Transforma divs, escalar, rotar, trasladar, desviar

by eorozco

HTML

<link rel="stylesheet" href="http://greenethumb.com/github/jquery-free-transform/css/jquery.freetrans.css">
<script src="http://greenethumb.com/github/jquery-free-transform/js/Matrix.js"></script>
<script src="http://greenethumb.com/github/jquery-free-transform/js/jquery.freetrans.js"></script>
<div id="one" class="shape trans">
    <iframe width="560" height="315" src="//www.youtube.com/embed/2zfqw8nhUwA" frameborder="0" allowfullscreen></iframe>)
</div>

<img id="two" src="http://greenethumb.com/github/jquery-free-transform/example/assets/bandit!.png" class="trans" width="200" height="132"></img>

CSS

.shape{
    width: 570px;
    height: 325px;
    background-color: #B2D237;
    z-index: 1;
}

iframe{
    z-index: 100;
}

JavaScript

// do a selector group
$('.trans').freetrans();

// updating options, chainable
$('#two').freetrans({
    x: 150,
    y: 100,
    'rot-origin': '50% 100%'
}).css({
    border: "5px solid blue"
});

$('#one').freetrans({
    matrix: "matrix(.95,.25,-.25,.95,30,50)"
});