Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Flyer Flip with CSS like a book

  • Hello Support Team,

    I was looking to
    https://codepen.io/ananyaneogi/pen/Ezmyeb
    to make a flip effect.

    What I want to achieve: That on hover the right page of the flyer turns that it looks like it’s opening like a book.
    http://www.flyairea.com/flyer

    Here you can see my container structure:
    https://ik.imagekit.io/y1gomy3s1/Screenshots/containerStructureFlipFlyer.JPG

    I hooked the following css into wp_head

    
    <style>
    
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      backface-visibility: hidden;
      -moz-backface-visibility: hidden;
    }
    	
    
    .flip-card-inner-turn {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      -moz-backface-visibility: hidden;
    }
    
    .flip-card:focus {
        outline: 0;
    }
    
    .flip-card:hover .flip-card-inner-turn,
    .flip-card:focus .flip-card-inner-turn
    {
      transform: rotateY(-180deg);
    	transition: transform 1s;
    	z-index: 1;
    }
    	
    
    .flip-card-front,
    .flip-card-back,
    .first_open {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .flip-card-front {
      color: black;
      z-index: 3;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .flip-card-back {
      color: white;
      transform: rotateY(180deg);
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    	
    .first_open {
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;	
    }
    
    </style>
    

    The idea was to flip the both containers (flip-card-front and flip-card-back) which are inside flip-card-inner-turn with the rotateY and after this transition to put the z-index for the container flip-card-inner-turn to 1 to put it to the back. After that the third container still has z-index of 2 and should be in the front.

    It’s working but the transition does not. If I put the complete flip-card-inner to the section like this

    
    .flip-card:hover .flip-card-inner,
    .flip-card:focus .flip-card-inner
    {
      transform: rotateY(-180deg);
    	transition: transform 1s;
    	z-index: 1;
    }
    

    the transition time works but it turns also the last element with the name first_open what I don’t want to turn.

    In a next szenario if this is working, I would like to open the next page of the Flyer when hovering over the container first_open to then display the next level and so on.

    Or am I on the total wrong way to make this possible?

    Emanuel

  • Hi Emanuel,

    For reference can, you share the link to where you added the “Flip card”? I’m not seeing it here: https://www.flyairea.com/flyer/

    I’ll try to see why it isn’t working as expected.

  • Hello Fernando,

    sorry, I forgot to put the page to “unrestricted”. Now it’s open 😉

    I already found out, that the z-index is the problem. It does not wait for the transition to be finished and directly comes into force. So the effect is working but behind the page which i wanted to put into the back after the flip.

    With this new knowledge I see new possibilities:
    1. Just put a picture from the right page of the first visible picture (flip-card-front) and just the left picture of the turned one (flip-card-back)
    2. Give the page behind (first_open) an opacity effect and wait the transition time of the flip until making it visible.

    But this would mean that I need to create a picture of the front page where the left side is transparent and from the back, where the right side is transparent.

    Or maybe I can use the rotate3d transform and put the axis not to the middle of a picture (y) but to the total left. Then I could save the time to make the pictures with transparency. Would that be possible?

    Emanuel

  • I see. Well, one thing you can try is to add a transition-delay. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

  • Hello again,

    i came further with my little project.

    I have the following structure now:
    https://ik.imagekit.io/y1gomy3s1/Screenshots/containerStructureFlipFlyer2.JPG

    And this css:

    
    <style>
    
    .flip-card-inner-turn1_2 {
      backface-visibility: hidden;
      -moz-backface-visibility: hidden;
    }
    	
    .flip-card-inner-turn2_3 {
      backface-visibility: hidden;
      -moz-backface-visibility: hidden;
    }
    
    .page1_2:hover .flip-card-inner-turn1_2
    {
      transform: rotateY(-180deg);
    	transition: transform 1s;
    	transform-style: preserve-3d;
    }
    
    .page2_3:hover .flip-card-inner-turn2_3
    {
      transform: rotateY(180deg);
    	transition: transform 1s;
    	transform-style: preserve-3d;
    }
    
    .flip-card-front,
    .flip-card-back,
    .first_open {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .flip-card-front {
      color: black;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .flip-card-back {
      color: white;
      transform: rotateY(180deg);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    	
    .first_open {
    	
    	display: flex;
      justify-content: center;
      align-items: center;	
    }
    
    .hover_container,
    .content_container1,
    .content_container2,
    .content_container3 {
    	position: absolute;
      width: 100%;
      height: 100%;
    }
    </style>
    

    How could I leave the transform effect “done” after it executed. So that the flyer stays open?
    http://www.flyairea.com/flyer

  • You’ll need JavaScript for that and a new CSS selector.

    The concept would be, that when you hover on the “flip” container, through Javascript, you’ll add a class to the “flip” container.

    Then, your CSS selector would be for the custom CSS class added through JS – not through :hover anymore.

    This way, when you hover, you can retain the Book’s styling of being “opened”.

  • Hello Fernando,

    I’d say this is done completely without JS:
    https://codepen.io/diemoritat/pen/LKROYZ

    I don’t mind having a button and need to do a click (was even my first idea and the reason to put the hover_container over all)

    So is there a way to add a radio-button over the pages and to change its state or work with the “active” instead of “hover”?

    And with JS you mean something like this?
    https://codepen.io/andersschmidt/pen/wWNyrq

    Right now I would make a hook element to the footer and put there the JS code. But for now I don’t see how to add the flip after a click is done for example.
    And as well I’m still having double pages in my container (e.g. left side transparent, right side is the bg image) that the rotateY applies to the middle. But it would be much better to just have the visible page in a container and that the effect does not apply to the middle for the image but to one of the outside Y-axis.

    Do you maybe have some examples where it’s done lightweight?

    Emanuel

    Emanuel

  • I see. That’s one way to do it.

    Unfortunately, something like this would be out of our scope as well.

    It’s not something that’s possible with GB.

    One approach is to just copy the HTML in this codepen entry, and just modify it.

  • Hello Fernando!

    I’m trying to do it with buttons now.

    My Container Structure:
    https://ik.imagekit.io/y1gomy3s1/Screenshots/FlipFlyer231124Structure.JPG

    I have two Element Hooks.
    wp_head is the CSS:

    
    <style>
    
    .flip-card-inner-turn1_2 {
      backface-visibility: hidden;
      -moz-backface-visibility: hidden;
    }
    	
    .flip-card-inner-turn2_3 {
      backface-visibility: hidden;
      -moz-backface-visibility: hidden;
    }
    
    /*	
    .page1_2:hover .flip-card-inner-turn1_2
    {
      transform: rotateY(-180deg);
    	transition: transform 1s;
    	transform-style: preserve-3d;
    }
    */
    
    .page2_3:hover .flip-card-inner-turn2_3
    {
      transform: rotateY(180deg);
    	transition: transform 1s;
    	transform-style: preserve-3d;
    }
    	
    .flipFlyer12 {
    	transform: rotateY(180deg);
    	transition: transform 1s;
    	transform-style: preserve-3d;		
    }
    
    .flip-card-front,
    .flip-card-back,
    .first_open {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .flip-card-front {
      color: black;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .flip-card-back {
      color: white;
      transform: rotateY(180deg);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    	
    .first_open {
    	
    	display: flex;
      justify-content: center;
      align-items: center;	
    }
    
    .hover_container,
    .content_container1,
    .content_container2,
    .content_container3 {
    	position: absolute;
      width: 100%;
      height: 100%;
    }
    
    </style>
    

    wp_footer is the JS for the button which I’ve added

    
    <script type="application/javascript">
    	const turnpage1btn = document.querySelector('.turnpage1');
      const flipcard1_2 = document.querySelector('.flip-card-inner-turn1_2');
    	turnpage1btn.addEventListener("click", function() {
      flipcard1_2.classList.add("flipFlyer12");
    });
    </script>
    

    The button I gave the class turnpage1 to be able to select it with the querySelector.
    So with the click event I thought, I can add the class flipFlyer12 and then the flip animation is proceeded.
    But somehow it does not work…
    Do you see, where I made the mistake?

    Edit: I forgot to empty the cache… No anser needed for now. I’ll proceed and will come back with other questions maybe…

    Emanuel

    http://www.flyairea.com/flyer

  • I see. Glad you got it working!

  • Hello Fernando,

    I came a little further.
    But I still have several small problems:
    http://www.flyairea.com/flyer

    1. The gap between the single containers is too big if the screen is too wide and I don’t know anymore, where I could set things to not have these gaps between the single pages. Example: https://ik.imagekit.io/y1gomy3s1/Screenshots/gaps_between_containers.JPG?updatedAt=1701360676414

    2. Pressing the second botton (middle one which is coming up on hover over 3rd page from the left) the page 3 and 4 should not be displayed in the same time. They should show up just after the page is turned arround. I tried the transition-delay but I don’t get it to work…

    
    .showpage {
    	opacity: 1;
    	transition-delay: 2s;
    	transition-property: opacity;
    	transition: opacity 1s;
    }
    	
    .hidepage {
    	opacity: 0;
    	transition: opacity 0s;
    }	
    

    Update:
    This I think I got to work with following code:

    
    .showpage {
    	opacity: 1;
    	transition: opacity 0.2s ease 1.2s;
    }
    	
    .hidepage {
    	opacity: 0;
    	transition: opacity 0s;
    }	
    

    3. If the complete flyer is open, it should be just possible to be closed again from the right side. page 4 (most right on) turned to the left. Them page 3 on page 2 and last page 1 on page 2. Opening the flyer is exactly the other way round. So I would like to have just the first button for opening the first page displaying on hovering over page 1 and 2. Then, when page 1 is open, it should be displayed also the button between page 2 and 3 to open page 3 to the right. When page 3 is open, also the button between page 3 and 4 should be visible on hovering but the button between page 2 and 3 should not be visible any more. The button for page 1 should be always there as it is also possible to close a real flyer from the left side. I thought about making this with changing the z-indexes of the buttons or containers. Is that correct?

    I’ll add you an admin account to be able to see the things live. But for understanding I’d prefer if you could explain it what to do and I’ll do it.

    Thanks in advance!
    Emanuel

  • Hi Emanuel,

    Unfortunately, we can’t help you further with this due to the level of customization involved. It’s well beyond our scope.

    What I would advise is to make a copy of the flyer with just two pages for simplicity. Then, address the issues you encounter one-by-one starting with the gap. Having just 2 pages should help you identify the root of the issue more easily.

    Otherwise, it would be best to reach out to a developer regarding this.

  • Hello again!

    I made it almost!
    http://www.flyairea.com/flyer-2

    So there is just one thing left which I want to know. How could I manage the containers, that when I scroll the browser window together, that the single pages don’t get a “gap” between the pages.
    I helped myself a little with making borders of some percentage and mad different settings for tablet and mobile.

    But for mobile the containers are little too big in total. So the picture of my flyer sizes down to the widh that it fits (what is good). But then the container is too high and making a big gap between headline and all the content. And in the other way round, when I’m turning my mobile device to landscape mode, the width of the flyer pages is not “filled out” so that the gap is coming.

    I guess this is a pure “container question” and with some knowledge I think I can make it 😉

    Furthermore I would like to add the container to the start page. I saw something to build a new block out of all my containers. Is that possible? And adding the new created container plus the elements to the start page for example?

    Thanks,
    Emanuel

  • Can you share a screenshot of the Gap issue for reference?

  • Hello Fernando,

    sure!
    I made a screen record that you can see what I mean!
    It’s here:
    https://ik.imagekit.io/y1gomy3s1/Screenshots/FlyerGapPresentation.webm?updatedAt=1701761803013

    Emanuel

  • I’m not able to see it. It says “Internal Server Error”.

    Can you check if it’s working?

Viewing 16 posts - 1 through 16 (of 18 total)
  • You must be logged in to reply to this topic.