javascript - 使页面剥离效果更好

Question

我希望您对以下几点提出建议

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

Jsfiddle peel effect

我使用了一个最初旋转 24 度的 div pagePeelsmallrotate。然后我为它的 Angular 和尺寸设置动画。

还有 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
            });

会暴露整个广告，至于剥皮，它看起来很好