仿阿里云首页轮播(视觉差效果)

阿里云利用了CSS3的 transform 动态改变旋转角度【分层切图】

由于JS无法直接修改CSS中的transform的旋转角度，度娘了一圈，貌似设计到了复杂的计算…..;
对于我这种菜B来说，算了吧果断换一种方法了, 测试了下, 动态改变左右间距也是可以实现效果哒[Good Job]！

    /* --------------------------- html -------------------------------- */
    <div id="ul_container" class="col-md-6 col-sm-6 banner-right animation-slideUp">
        <div style="z-index:1"><img src="images/_banner/dizhuo.png" alt=""/></div>
        <div style="z-index:3"><img src="images/_banner/tuan-new.png" alt=""/></div>
    </div>


    /* --------------------------- css -------------------------------- */
    .banner-right {position: relative;margin-top: -50px;}
    .banner-right div:nth-child(1) {position: absolute;top: 40px;left: -10px;}
    .banner-right div:nth-child(2) {position: absolute;top:0;left:48px;}


    /* --------------------------- js -------------------------------- */
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var oUl=document.getElementById('ul_container'),
        l = oUl.offsetWidth/2,
        t = oUl.offsetHeight/2,
        aLi = oUl.getElementsByTagName('div');
        oUl.onmousemove = function( ev ){
        var oEv = ev || event,
            iL = oEv.clientX,
            iT = oEv.clientY,
            sped = 130; //移动范围
        for(var i=0; i<aLi.length; i++){
            aLi[i].style.marginLeft=-((iL - l)/sped*aLi[i].style.zIndex) +'px';
            aLi[i].style.marginTop=-((iT - t)/sped*aLi[i].style.zIndex) +'px';
        }
    }
    </script>