Flipbook Codepen

If you plan on sharing your flipbook on CodePen to gain views and hearts from the community, keep these best practices in mind:

function drawFrame(index) ctx.clearRect(0, 0, 400, 400); ctx.drawImage(frames[index], 0, 0); document.getElementById('pageNum').innerText = Page $index+1 / $totalFrames ; document.getElementById('slider').value = index; flipbook codepen

: Set on a parent element, this defines how "far" the user is from the 3D object, making the flip appear realistic rather than distorted. backface-visibility: hidden; If you plan on sharing your flipbook on

Front Cover Page 1 Page 2 Page 3 Page 4 Back Cover Use code with caution. 2. The CSS Magic document.getElementById('slider').value = index