Jquery 谷歌+；/谷歌加照片叠加，他们是怎么做到的？

我正在尝试开发一个相册照片堆栈，比如google+， 我刚刚读了所有关于这个“问题”的帖子。。。但没什么……都错了。 我正在使用Chrome，在google+中，我看到了照片的整个移动。。。在其他例子中，我看不到这种效果，只有开始情况和结束情况。 我看到google+在body的末尾添加了一个div，其中包含页面中div的相同图像，并将其（带绝对位置）放在exist div上。 新部门做了动作，而旧部门没有！ 我重新创造了同样的情况，但效果不好，而且我可以看到开始和结束的情况

这里是html

<div class="cn">
    <img src="media/images/david-guetta-will-i-am.jpg" alt="" />
    <img src="media/images/david-guetta--nothing-but-the-beat-11704-cropped.jpg" alt="" />
    <img src="media/images/Render_BMW_Serie3_F30_01.jpg" alt="" />
    <img src="media/images/david-guetta-will-i-am.jpg" alt="" />
</div>

我不知道google+为什么要复制第一张图片

和JS

<script type="text/javascript">
$('.cn:first').mouseenter(
function()
{
    $('body').append('<div class="cn cn2" style="z-index:5; position:absolute;">'+$(this).parent().html()+'</div>');

    $('.cn2').mouseenter(function(){
        $('.cn2 img:nth-child(1)').css({'-webkit-transform':'rotate(-6deg) translate(-40px,0) scale(1.05)'});
        $('.cn2 img:nth-child(2)').css({'-webkit-transform':'rotate(0deg) translate(0,0) scale(1.05)'});
        $('.cn2 img:nth-child(3)').css({'-webkit-transform':'rotate(6deg) translate(40px,0) scale(1.05)'});
    });
    $('.cn2').mouseleave(function()
    {
        $('.cn2 img:nth-child(1),.cn2 img:nth-child(2),.cn2 img:nth-child(3)').css({'-webkit-transform':'none'});
    });

});
</script>

$（'.cn:first'）。mouseenter(
函数（）
{
$（'body'）.append（''+$（this.parent（）.html（）+''）；
$（'.cn2'）.mouseenter（函数（）{
$（'.cn2 img:nth child（1）'）.css（{'-webkit transform'：'rotate（-6deg）translate（-40px，0）scale（1.05）}）；
$（'.cn2 img:nth child（2）'）.css（{'-webkit transform'：'rotate（0deg）translate（0,0）scale（1.05）}）；
$（'.cn2 img:nth child（3）'）.css（{'-webkit transform'：'rotate（6deg）translate（40px，0）scale（1.05）}）；
});
$（'.cn2'）.mouseleave（函数（）
{
$（'.cn2 img:nth child（1），.cn2 img:nth child（2），.cn2 img:nth child（3）'）.css（{'-webkit transform'：'none'）；
});
});

---

这里代码在jFIDLE中运行：

我不确定，但您可能会使用

$（）。动画制作
而不是
.css（）
您不能使用或给我们一个实例吗？是的。。好的，sry…您必须将-webkit转换添加到您的css中