使页面剥离效果更好

Question

我想在此提出以下几点建议

1. 如果可能，使剥离效果更加逼真。
2. 减小果皮的大小（能够看到完整的广告）。

Jsfiddle peel effect

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

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

让我知道我该怎么做

Answer 1

更改此部分代码

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

将揭示整个广告，至于剥离它看起来很不错