javascript - 使页面剥离效果更好

我想在这里针对以下几点提出您的建议


如果可能，使剥离效果更真实。
减小果皮的尺寸（以便能够看到完整的广告）。


Jsfiddle peel effect

我最初使用div pagePeelsmallrotate旋转了24度。然后，我为其设置角度和尺寸的动画。

div pagePeelcontainer尺寸也被设置为动画。

There are two functions
         var pagePeelopen = function() {}  /*opens the ad*/
         var pagePeelclose = function() {} /*closes the ad */

我尝试只倾斜pagePeelcontainer div而不倾斜它的孩子来获得此处提供的小果皮

css used to avoid child elements getting affected
#pagePeelcontainer > * {
    transform:skew(-45deg);
}

但单击打开后无法正确获得剥离效果。

Jsfiddle skewed peel

让我知道我该怎么做

最佳答案

更改本节代码

            $('#pagePeelcontainer').stop().animate({
                width: 1000,
                height: 1000
            }, {
                duration: 500
            });

会揭示整个广告，因为去皮看起来很不错