CODEWITHSUNDEEP
csscss-transitionscss-animations
Hideto
Hideto

Reputation: 309

Pure CSS book cover flip on page load after delay

I'm trying to make a page transition that starts as a "book cover" on only a main content div, not the whole page. You can see the cover for a few seconds, long enough to have a good glance at it. Then the cover is supposed to "open" like any hardback book cover opens, lifting up front one side to then flip out of view as if zoomed in on the inner page and the cover is out of frame.

I've looked at so many tutorials and generators and there seems to be some sort of "holy grail" of flipping, where the item flips horizontally on its y-axis in the center, like flipping a card over. I can't find anything that helps me figure out how to flip from just one side across to the other, just like a hardback book cover would do.

I can't provide a code snippet as I literally don't know where to begin. I could load in one of a zillion sample codes from one of a zillion tutorial pages but it would just be random, meaningless animated flipping code that I would have zero understanding of how to customize to do what I need, otherwise I'd have done it already and not be here.

Can anyone point me in the right direction? Even if you just point me at a tutorial page for some generic animated flipping code and simply tell me what attributes to alter to get it to flip open like a hardcover book, that would be perfect.

I think I can figure out how to get it to trigger after a pause on loading using delays, but if you have a better solution, that's welcome as well.

Upvotes: 1

Views: 3454

Answers (1)

Philip
Philip

Reputation: 2988

I'll walk you through it:

  1. First, we need a HTML structure, so we create 'pages' (or page sides actually):
    <div class="page odd" id="cover">This is the cover</div>
    <div class="page even" id="cover_back">Inside of the cover</div>
    <div class="page odd" id="content">This is where the content goes...</div>
  1. Second, we have to position these pages. The odd ones should be in the center and the even ones should be vertically centered but to the left of the odd pages. This is done with the following CSS:
    .page {
        display: inline-block;
        z-index: 1;  /* the content page should go behind the cover pages */
        position: fixed;

        /* Size & Position */
        top: 50%;
        left: 50%;
        width: 360px;
        margin-left: -180px; /* half of width */
        height: 500px;
        margin-top: -250px; /* half of height */
 
        /* Add some styling, so the pages are opaque */ 
        background-color: #eee;
    
        /* Hide backface of each page/side, so we don't see it when turned */
        backface-visibility: hidden;
  
        /* Set up animation */
        transition: transform 1.0s ease;
  
        /* Hide content that overflows the page */
        overflow: hidden;
    }

    .page.even {
        margin-left: -540px; /* 1,5 x width to position it left of odd pages */
    }
  1. When unturned, the odd sides face the viewer, and even sides don't (like a real book). This can be done by using transform: rotateY(). The odd pages flip at the left side, even pages at the right. So we add these transform-origin's to the .page.odd and .page.even classes:
    .page.odd {
        transform-origin: 0% 0%;
    }

    .page.even {
        transform-origin: 100% 0%;
        transform: rotateY(180deg); /* even pages start rotated (closed book) */
    }
  1. When you 'turn a page', two sides have to be rotated (1 odd, 1 even), so the odd side doesn't face the viewer anymore and the even side will. You can do this by adding the .turn class to these sides. In these .turn classes you set the appropriate transform: rotateY()'s for odd and even sides:
    .page.odd.turn {
        transform: rotateY(-180deg);
    }
    .page.even.turn {
        transform: rotateY(0deg);
    }

  1. To make everything look nice and smooth, we add perspective: 1200px; to the body's CSS and make sure the html and body elements are width: 100% and height: 100%.

  2. Final touch: we want the cover pages to go in front of the content page, so we set the z-indexes of these pages:

    #cover {
        z-index: 3;
    }
    #cover_back {
        z-index: 2;
    }

To start you off, I made a example with comments in the CSS to help you out: https://jsfiddle.net/PhilQ/b52dw42d/12/

The turning of the page in my example is done by clicking the button, but you probably want to change the JavaScript to use a setTimeout() to fire the .toggleClass('turn') after X ms.

I also made a example where the turning happens using CSS animation: https://jsfiddle.net/PhilQ/b52dw42d/11/

Upvotes: 6

Related Questions