Use of Javascript, Jquery and CSS.
There are three different puzzles. You can click on any piece to constitute one of the five puzzles.

<?php
for($i=1; $i<=27;$i++)
{
    echo "
    $('.quickFlipCta".$i."').click(function(){";
            echo "cut".$i." = cut".$i."+1;";
            echo "if(cut".$i."==6){cut".$i."=1;}";
            echo "if(switch_cut".$i." == true)";
            echo "{";
                echo "$('.backPanel .quickFlipCta".$i."').css('background-image', 'url(http://lab.misspralina.com/projects/puzzlelize/images/puz'+cut".$i."+'_".($i<=9 ? '0' : '').$i.".jpg)');";
                echo "switch_cut".$i."=false;";
            echo "}";
            echo "else";
            echo "{";
                echo "$('.frontPanel .quickFlipCta".$i."').css('background-image', 'url(http://lab.misspralina.com/projects/puzzlelize/images/puz'+cut".$i."+'_".($i<=9 ? '0' : '').$i.".jpg)');";
                echo "switch_cut".$i." = true;";
            echo "}	";
        echo "});";
        $rand = rand(1, 5);
        echo "cut".$i." = ".$rand.";
        $('.frontPanel .quickFlipCta".$i."').css('background-image', 'url(http://lab.misspralina.com/projects/puzzlelize/images/puz".$rand."_".($i<=9 ? '0' : '').$i.".jpg)');";
}
?>
});

Use of JavaScript, Jquery mixed with CSS.
Thanks to the mouse movements you can see the creation of a form.

<?php
for($i=1; $i<$max; $i++)
{
?>
.no_<?php echo $i?>{
    left:11px;
    top:78px;
}
<?php
}
?>
...

$('#cube_holder').mousemove(function(e){
    var position 	= $(this).position();
    var offset 		= $(this).offset();
    var x 			= e.pageX - (offset.left);
    var y 			= e.pageY - (offset.top);
    
    if(e.pageX>0 && e.pageX<126 && e.pageY>0 && e.pageY<131)
    {
        $(".no_1").animate({"top": "166px"}, "<?php echo $speed_arr[rand(0, 2)];?>");
        $(".no_1").animate({"left": "28px"}, "<?php echo $speed_arr[rand(0, 2)];?>");		
    }  
    ...
});

$('#cube_holder').mouseleave(function(){
    <?php
    for($i=1; $i<$max; $i++)
    {
        ?>
        $(".no_<?php echo $i?>").animate({"top": "<?php echo rand(0,600);?>px"}, "<?php echo $speed_arr[rand(0, 2)];?>");
        $(".no_<?php echo $i?>").animate({"left": "<?php echo rand(0,400);?>px"}, "<?php echo $speed_arr[rand(0, 2)];?>");
        <?php
    }
    ?>
});

Use of JavaScript, JQuery and CSS.
The aim is to give an effect of depth. The graphic composition appears as a 3D effect.

<div style=" width:263px; height:181px;">
    <img src="http://www.portfolio.misspralina.com/images/tiger/<?php echo $tiger_arr[rand(0, (count($tiger_arr)-1))];?>" alt="" width="163" height="181" style="position:absolute; top:-697px; left:-340px;" />
</div>