求教，CSS3绚丽照片墙JS代码及其中遇到的问题

听一个刚开始学习前端的同学分享了一个用CSS3做照片墙的案例

参见http://www.imooc.com/comment/227

他认为其中教学的老师在css中大量使用重复代码为每一个图片分配属性值太累，急切想知道怎么能用其他办法实现

为了让他帮他解决这个问题，写了一段JS代码：

 function ranPic(){
        var imgs=document.getElementsByTagName("img");
        for(var i=0;i<imgs.length;i++){
            imgs[i].style.left=Math.random()*1100-400+"px";
            imgs[i].style.top=Math.random()*500+"px";
            var ranRotate=Math.random()*50-25;
            imgs[i].style.transform="rotate("+ranRotate+"deg)";
            imgs[i].οnmοuseοver= function () {
                this.style.transform="rotate(0deg)"+''+"scale(1.3)";
            };
            imgs[i].οnmοuseοut= function () {
                var ranRotate=Math.random()*50-25;
                this.style.transform="rotate("+ranRotate+"deg)";
            }
        }
    }

调用该函数来实现图片的随机分布和触发鼠标事件

下面是原css代码：

body{
    background-color: #eeeeee;
}
h1{text-align: center;}
.container{
    width: 960px;
    height: 450px;
    margin: 60px auto;
    position: relative;
}
img{
    width: 400px;
    height: 300px;;
    padding:10px 10px 15px;
    background: #ffffff;
    border: 1px solid #dddddd;
    position: absolute;
    /*transform: rotate(25deg);*/
    /*-webkit-transform: rotate(25deg);*/
    /*-ms-transform: rotate(25deg);*/
    /*-moz-transform: rotate(25deg);*/
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
}
img:hover{
    transform: rotate(0deg) scale(1.3);
    -webkit-transform: rotate(0deg) scale(1.3);
    -ms-transform: rotate(0deg) scale(1.3);
    -moz-transform: rotate(0deg) scale(1.3);
    box-shadow: -10px 10px 15px #ccc;
    z-index: 2;
}

可惜我作为一个初学者，在写完JS后半段，调用鼠标事件前，遇到了两个难点，希望有人能与我分享讨论一下解决思路：

1.img:hover中transform失效，不得已操作DOM调用鼠标事件来激发transform属性，请教此处应该如何解决？

2.使用onmouseover事件后，图片无法在鼠标离开后还原，所以才用到onmouseout事件，但是在这个事件中调用变量ranRotate的时候遇到了闭包问题，不会解决，

只能在事件函数中重新生成一次变量，导致鼠标离开后还原的角度与之前不同，求教，谢谢分享