Explaining the mechanics of the page-turning effect in turn.js

I'm interested in creating a similar page flip effect and I'm curious about how turn.js achieved it. It seems to utilize CSS transformations like translation and rotation. Upon inspecting the code, I noticed there are two wrappers with different rotations - one with a positive angle (as seen in this answer) and the other with a negative angle that corresponds to the first.

When I tried replicating this on a test page using only rotations, I encountered an issue where the image appeared flipped upside down when reaching a certain angle. For example, when setting 

-webkit-transform: rotate(180deg) translate(102px, -326px);
, the image displayed correctly. However, I couldn't figure out why turn.js doesn't seem to apply any transformations to the original page element itself.

You can check out my attempt on this jsfiddle.

javascriptjquerycsscss-transforms

Answer №1

After exploring, I discovered that the rotation for the page below is located within a separate division. The current page's positive and negative rotation serves only to clip the current page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to generate a new file via POST request in mongoose and express

Can someone please review my Node.js code? I am trying to save contact page data in Mongoose Compass. The code runs without any errors, but it's not saving the data. <form action="/" class="contact_form grid" method="POST& ...

javascriptnode.jsdatabaseexpressmongoose

How to designate a try / catch block as asynchronous in TypeScript / JavaScript?

I am facing an issue where the code is not entering the catch block in case of an error, try { this.doSomething(); } catch (error) { console.error(error); } This problem occurs when "doSomething" returns a promise or runs asynchronous code. doSome ...

javascriptangulartypescriptasynchronouspromise

The formula for the line connecting the camera's center to a plane in ThreeJS

Currently, I am in the process of working on a modified version of the threeJS editor. One specific feature I am focusing on requires me to determine the exact world point that the center of the camera is directed towards. I speculate that if I can ascert ...

javascriptthree.jsthreejs-editor3dcamera

Accessing JSON array values in a nested controller in AngularJS can be achieved by using

How can I access a Json array value in another controller? I am working with nested controllers where the nested controller should return the first character of the first name and last name. For example, if my first name is Anand Jee, it should return AJ. ...

javascriptangularjsjson

A guide to mastering Controllers in AngularJS

Trying to set up a basic page with a controller but encountering difficulties. The HTML code is straightforward, with an Angular script included, but the functionality isn't working as expected. The HTML snippet: <!DOCTYPE html> <html ng-ap ...

javascripthtmlangularjs

Incorporate the column number class when using Masonry

Trying to put this into words is a bit tricky, but I'll give it a go. I'm curious if I can assign a class based on the column number within a Masonry layout. For instance, in a two-column layout, items in the left column would have a class of 1, ...

jqueryjquery-masonry

Unable to process image upload due to setState not being recognized as a function in ReactJs

Attempting to implement an upload function using the cropper component. However, encountering an error when trying to set the state: Uncaught TypeError: this.setState is not a function at FileReader.reader.onload Component import React, { Component, P ...

javascriptreactjsimage-upload

Mistake in the hovering positioning within the WordPress theme

I've encountered a hover issue on my website that I'm trying to resolve. Every time I hover over a product, the product description appears underneath it instead of on top, and I can't seem to find a solution: The site is using the sentient ...

csswordpress

Upgrade button-group to dropdown on small screens using Bootstrap 4

I am currently developing a web application and incorporating Bootstrap 4 for certain components such as forms and tables. Within the design, I have included buttons grouped together to display various actions. Below is an example code snippet: <li ...

javascriptjquerycssbootstrap-4

Aligning images in center of list

I'm in need of some CSS expertise to assist with this layout. Here is the current structure: <div class="movieList"> <div class="image" selected = true> <img class="poster" src="image1" selected = true/> </div> <d ...

htmlcssasp.net-mvc

How to trigger the error callback instead of success in AngularJS when making an Ajax post request

I'm relatively new to using ajax so please bear with me. When working with AngularJs, I typically execute an ajax post request like this: $.ajax({ url: "http://localhost:65337/api/Account/Register", type: ...

jqueryajaxangularjsasp.net-web-apihttp-post

Simple Method to Retrieve JSON Data from a Data Attribute Using .attr() (or Similar Function)

It seems like I'm hitting a roadblock with something fairly basic, and I can't seem to find a solution. I've got a JSON array that I want to pass to my JavaScript using a data attribute on a div like this: <div id="scope" data-json=&apo ...

javascriptjqueryjson

Implementing jQuery autocompletion in Symfony version 3.3.6

Looking to implement 2 search bars on my website: 1. Job Search Bar 2. City Search Bar The goal is to allow users to search for a specific job and find artisans in a chosen city similar to the style of Seeking guidance on how to achieve this functionalit ...

jquerysymfony

Using Jquery and the cookie.split method to extract and eliminate a value from a cookie

I am trying to figure out how to remove a specific matching value from a cookie using JavaScript. I have written a script that loops over the cookie and checks for matches, but I can't seem to successfully remove just the matching value. Any tips on a ...

javascriptjquerycookies

What could be causing my JavaScript pricing calculator to malfunction?

I've been struggling to make the script below work, but I can't seem to figure out why. It should be functioning properly. Even though all variables are in place, no price is appearing? You can view the HTML on this page: var cake_prices = n ...

javascripthtml

Unable to initialize metro server due to the error "attachToServer is not a valid function"

After following the instructions in the original documentation, I executed npx react-native init AwesomeProject without making any changes. However, when I try to run npx react-native start or yarn start, I encounter an error stating that attachToServer i ...

javascriptreactjstypescriptreact-nativemetro-bundler

"Error encountered when making a request to Google API using Ember.js, response remains

Trying to fetch place suggestions from Google API using Ember js. Below is the code snippet for the service module: fetch(){ let url=`https://maps.googleapis.com/maps/api/place/autocomplete/json?input=IL&types=geocode&key=API_KEY` return Ember.RSV ...

javascriptajaxgoogle-maps-api-3ember.jsautocomplete

Tips for adding a button to the SB Admin 2 Card header without altering its height

I am currently utilizing the SB Admin 2 template for my project and encountering difficulty when trying to add a button in the card header without altering the default height. The goal is to maintain a consistent look across both cards, as illustrated in t ...

htmlcssbootstrap-4

Tips for displaying all documents within a MongoDB collection using the sharedb-cli command line tool

My client-demo is not working as expected. I am trying to retrieve all documents from the "file" collection, but I am getting null results. https://i.sstatic.net/Pw6sA.png When testing with the mongo shell, I can see that the document data actually exist ...

javascriptnode.jsmongodbsharedb

Tips for positioning buttons within a responsive navigation bar

In my code for the navigation bar, located in "Navbar2.jsx", I have included various components and styles to create a dynamic navbar with dropdown functionality. The issue I am facing is that when the menu drops down on mobile view, it shifts the position ...

cssreactjsnext.jstailwind-css