Stuck at animation a book page in css

Question

Hey I am in a problem where I am using Epubjs. Epubjs renders a book in a container. Book has 2 pages one on the left and one on the right. For example this can be the structure of the book .

 <div class="parent"> 
    <div>page1</div>
    <div>page2></div>
 </div>

These page 1 and page 2 take half width and and full height of the book. Now I want to animate this div just like a book flip. I am able to achieve the rotate y of the div and by giving it perspective, I have given it a 3d look but the problem I am stuck at is , making this animation a curl like, for now my div is just rotating on y-axis in 3d but it doesn't give a curl look just like a real page flip. Another thing is: I can't add a parent div for animation for eg.

<div class="parent"> 
  <div class="foranimation">
    <div>page1</div>
  </div>
  <div>page2></div>
</div>

I can't do that as it will distort the structure of the book.

I tried looking into code sandbox and other example but they give too many parents div for animation