使用css实现贴纸拉脱效果

我正在尝试用css创建一个贴纸拉脱效果

为此，我找到了以下示例：

现在我有三个问题

我使用的是图像，而不仅仅是颜色

在本例中，剥离效果非常明显

因为我使用的是图像，所以无法移动它

现在让我展示一些代码的问题：

。测试标签{
/*
.贴纸：悬停。粘性{
变换：旋转（10度）；
}
*/
}
.测试贴纸{
过渡：所有750ms缓进缓出；
}
.测试贴纸.贴纸{
位置：相对位置；
宽度：180px；
高度：180像素；
保证金：0自动；
背面可见性：隐藏；
}
.测试贴纸.贴纸.粘性{
变换：旋转（-125度）；
}
.测试贴纸.贴纸.粘性{
位置：绝对位置；
排名：0；
左：0；
宽度：180px；
高度：180像素；
}
.测试贴纸.贴纸.展示.圆圈{
字体系列：“helvetica neue”，arial；
字号：200；
线高：140px；
文本对齐：居中；
光标：指针；
}
.测试贴纸.贴纸.展示.圆圈{
背景：紫色；
}
.测试贴纸.贴纸.圆形包装纸{
位置：绝对位置；
宽度：180px；
高度：180像素；
左：0px；
顶部：0px；
溢出：隐藏；
}
.测试标签.标签.圆圈{
位置：绝对位置；
宽度：140px；
高度：140像素；
利润率：20px；
边界半径：999px；
}
.测试贴纸.贴纸.背面{
高度：10px；
顶部：30px；
}
.测试贴纸.贴纸.背面.圆圈{
利润上限：-130px；
背景颜色：绿色；
}
.测试贴纸.贴纸.正面{
高度：150像素；
底部：0；
顶部：自动；
-webkit盒阴影：0-140px20px-140pxRGBA（0,0,0,0.3）；
}
.测试标签。标签。正面。圆圈{
利润上限：-10px；
背景：url（“https://upload.wikimedia.org/wikipedia/commons/9/93/Wordpress_Blue_logo.png");
背景尺寸：140px 140px；
变换：旋转（-235度）；
}
.测试标签.标签：悬停.返回{
高度：90px；
顶部：110px；
}
.测试贴纸.贴纸：悬停.返回.圆圈{
利润上限：-50px；
}

---

像这样吗？不，你想了解我，我的设计是这样的，我想用css做什么：