How page turn effect work in turn.js

Question

I want to implement similar thing (page flip) and was wondering how turn.js created it's effect. It use css transformation: translation and rotation to create the effect. I was checking in inspector that there are two wrappers with rotation (as pointed in this answer) but rotation are

outer wrapper positive number like rotation(30deg) and

inner wrapper negative rotation with the same angle rotation(-30deg) (if dragging bottom left corner).

I try to use the same thing in test page (only rotation) but the only thing that work is removing the corner, and it don't rotate the page (I use image) in demo is upside down when angle is 45, why this don't work? If I set

    -webkit-transform: rotate(180deg) translate(102px, -326px);

on the image it's right but why turn.js don't apply any transformation to original element of the page?

Here is jsfiddle.

Answer 1

I found that rotation the page that is below is in different div, the current page with positive and negative rotation is only for clipping the current page.