CSS或Javascript折纸效果

我试图复制create和effect，如果用户单击div，它就会像一张展开的纸一样“打开”

我不知道从哪里开始，甚至在谷歌上找什么，所以任何帮助或相关信息的链接都会非常有用

这是我想要的图像（为了让hello文本也能随纸张展开）：

提前谢谢大家

HTML

<div class="parentDiv">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

您可以将文本“HELLO”放置在父div中，使其绝对位置和中心对齐

div.parentDiv {
  width: 200px;
  height: 100px;
}

div.div1{
  width :100px;
  height: 100px;
  float:left;
  background-color: yellow;
  transform: skew(0deg,20deg);
}
div.div2{
  width :100px;
  height: 100px;
  float:left;
  background-color: yellow;
  transform: skew(0deg,-20deg);
}