Flyer Flip with CSS like a book

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

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

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

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

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