zoomTo: Simple

by secretgspot

HTML

<script src="https://raw.github.com/jaukia/zoomooz/master/jquery.zoomooz.min.js"></script>
<body class="zoomTarget" data-debug="true">
        <div id="item1" class="zoomTarget" data-debug="true"></div>
        <div id="item2" class="zoomTarget" data-debug="true"></div>
        <div id="item3" class="zoomTarget" data-debug="true">
            <div id="item3b" class="zoomTarget" data-debug="true"></div>
        </div>
        <div id="item2b" class="zoomTarget" data-debug="true"></div>
        <div id="item4" class="zoomTarget" data-debug="true"></div>
    </body>

CSS

/* these are not necessary */

html {
    background-color:white;
    overflow:hidden;
}

body {
    background-color:white;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

div {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#item1 {
    background-color:#fcc;
    position:absolute;
    left:50px;
    top:50px;
    width:300px;
    height:200px;
    border:1px solid red;
}

#item2 {
    background-color:#ccf;
    position:absolute;
    bottom:40px;
    right:40px;
    width:300px;
    height:200px;
    border:1px solid blue;
}

#item3 {
    background-color:#cfc;
    position:absolute;
    top:0px;
    right:100px;
    width:300px;
    height:200px;
    border:1px solid green;
    -webkit-transform: rotate(10deg) translate(0px,0px);
    -moz-transform: rotate(10deg) translate(0px,0px);
    -o-transform: rotate(10deg) translate(0px,0px);
}

#item3b {
    background-color:#cff;
    position:absolute;
    top:0px;
    left:0px;
    width:200px;
    height:100px;
    border:1px solid cyan;
    -webkit-transform: rotate(10deg) translate(200px,200px);
    -moz-transform: rotate(10deg) translate(200px,200px);
    -o-transform: rotate(10deg) translate(200px,200px);
}

#item2b {
    background-color:#99f;
    position:absolute;
    bottom:80px;
    right:80px;
    width:100px;
    height:100px;
    border:1px solid blue;
}

#item4 {
    background-color:#ffc;
    position:absolute;
    bottom:200px;
    left:200px;
    width:200px;
    height:200px;
    border:1px solid yellow;
    -webkit-transform: rotate(30deg) skew(20deg);
    -moz-transform: rotate(30deg) skew(20deg);
    -o-transform: rotate(30deg) skew(20deg);
}