Hi,
I have a couple of problem with this flip card “https://codepen.io/albertobellomi/pen/GRZobqw”:
Do you have any solution that I am missing?
My brain hurts 
That’s quite complicated.
It looks to me as though you would need to flip the background on masking-fauna when it is hovered.
e.g.
.masking-fauna:hover{
transform: rotateY(180deg);
}
You were transforming the flip-card back element but that doesn’t actually seem to be used. The ‘Fauna’ text is on the masking-fauna element is being rotated already so you need the counter rotation I mentioned above.
There also seems to be some dead spots around the edges where the image flips back and forth that needs sorting out.
Usually with a flip effect you would apply the front image to flip card-front and the back image to flip-card back but yours is quite complicated with all the masking and blurring. I;d need to strip it all down to scratch to work it out properly
WOW! Great PaulOB, this solution it is fine. I had tried this property but at the moment it didn’t work, maybe I had some other active property that was creating confusion.
Now I have to solve the second question, the background under the back panel doesn’t match with background under the body, I should find the property that create confusion, it is not simple … I don’t have an idea how to fix it, if you like to help me I would be very grateful.
Thank you
I think that’s because of the rotation and the background gets rotated as well.It may be that you will need to place the image and mask on an intermediate element that can be rotated back to normal when the parent is flipped. Whether that will work or not will be a matter of trial and error.
I’m out until tomorrow afternoon now so will look back when I have a little more spare time. As I said it may mean starting from scratch and working out each stage at a time to see what works and what doesn’t.
This is just proof of concept as this seems to do what you want and does not reverse the background. However it suffers from the same problem as yours is that the first image flicks back too quickly when you stop hovering.
You shouldn’t see the stag until it reverses back. It’s only there a fraction of a second (its worse on your example) but it spoils the effect.
I’m sure it could be fixed by changing to separate elements and I’ll have a look later when I have some more time.
Thank you so much Paul,
I really appreciate your effort to help me with this project.
in the meantime I was able to test the file and I tell you that in Chrome and Safari the background for both the front and the back work fine now.
Firefox instead, it doesn’t keep the same background both in front and in back.
I expect you are running into the behaviour where background-attachment:fixed becomes scroll when attached to transformed elements.
Firefox follows the specs but chrome hasn’t caught up yet.
https://bugs.chromium.org/p/chromium/issues/detail?id=667006
A simple test seems to confirm this in Chrome and Firefox.
I’m not sure how to get around this problem yet as your example relies on fixed backgrounds that map to the viewport.
Sorry but I’m out this evening so will have to wait until I have a play around tomorrow unless someone else can jump in before then
Whoa spent way too much time on this
The issue with the transform property creating a new stacking context is more or less insurmountable in Firefox. Indeed the behaviour will eventually find its way into Chrome and other browsers because Firefox is obeying the specs.
I’ve come up with a workaround that is a little complex but basically stretches the inner elements to be the size of the viewport and then the fixed background image won’t get shrunk to the the centre section only. The mask has to be sized accordingly and positioned to the centre so you can see it.
This works on the assumption that the flip card is centred in the viewport and we use calc to get the viewport width minus half the elements width in order to place it at the top of the viewport (the same applies to the height).
If you change the width and height of the main element then you will need to change the calc values accordingly.
Unlike your original this spins nicely without the graphic flicking on and off. I also used css variables for the images and masks as they were a nuisance in the css when changing styles millions of times.
This pushes the browser to the limit and Chrome struggles a bit with this. Firefox is a lot smoother but does look slightly brighter. You can probably tweak further as i have simplified the code a lot.
The code is here on this codepen:
This also assumes a 100% height layout only as it would all go awry should the need to scroll be present.
Hope its of some use but it was fun playing with it anyway
Thank you so much Paul, this is a wonderful job.
In the meantime I tried to insert more flip boxes here the result:
Chrome and Firefox still struggle a little with this. Safari is magic with flip cards, they rotate perfectly with their specifications.
Yes its the fixed backgrounds that take a toll on the css parser. Firefox has always struggled with fixed backgrounds for some reason.
You are still getting the same issue in Firefox with the wrong part of the background behind the square.
Each of those boxes will need individual co-ordinates to place the background from where the box is located. The mask also needs to be re-positioned on each.
Here’s a rough example for the first one in these screenshots. See the web inspector values to achieve this.
.flip-card-front:before,
.flip-card-back:before {
content: "";
position: absolute;
left: calc(-50vw + 33vw);
top: calc(-50vh + 16vw);
width: 100vw;
height: 100vh;
box-shadow: inset 0 0 0 50vw rgba(255, 255, 255, 0.4);
filter: blur(20px);
background: var(--main-bg) no-repeat fixed;
background-size: cover;
}
.flip-card-front-inner,
.flip-card-back-inner, mask1 {
background: var(--main-bg) no-repeat fixed;
background-size: cover;
-webkit-mask-image: var(--mask-img1);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 18vw 21vh;
-webkit-mask-position: center;
mask-image: var(--mask-img1);
mask-repeat: no-repeat;
mask-size: 16vw;
mask-position: 18vw 21vh;
}
Of course those rules would need to be unique for each square so would need a new class on a parent to target individually and set different values for each.
It’s quite a task as you would need to add/subtract the width and gaps of each element to get the background in the correct position from where the element sits. In my example the element was in the centre so we could do a straight -50vw and -50vh get half the viewport width and then add the element width/height to bring the background to start in the top left corner. Lastly the mask position would need to coincide with the elements position.
This also means you can’t let items wrap to three rows or the calculations will be out.
It seems a lot of work for something that nobody is probably going to notice
Hi Paul,
I have arranged all the background as you suggested with the right coordinates, now everything works fine, at least it seems to me.
Now I am fighting with the masks, I cannot place the row below. I’m following your instructions but I can’t place them, where am I wrong? Or maybe I’m getting a little confused? 
I also tried to insert a link <a> in html on the back panel of onguna of the flip cards but these don’t work, where am I wrong?
Sorry I’m away today but will take s look tomorrow and see what I can do
You missed out a comma on all the bottom row styles after the first rule
Here’s one but you missed all the other similar rules as well.
.flip-card-front-inner-citta,
.flip-card-back-inner-citta {
I’ll have a look at the Firefox issue next 
Thank you so much Paul,
I placed so much code that I forgot about commas. 
I also tried to fix the background under the masks that did not match in Firefox, these is the code:
background-position-x: calc ();
background-position-y: calc ();
for each card, and the background works very well.
Unfortunately, these codes are now commented because they are damaged in Chrome and Safari, their backgrounds under the masks no longer match the underlying background.
Thanks again for helping me with this not very simple project I appreciate your effort to help me. 
The issue is that the masks need to match the position and therefore we need to use calc again as the height of the element is based on the width of the viewport so we can’t use a percentage or fixed size.
e.g.
The first one would need to be something like.:
mask-position:17vw calc(50vh - 18vw);
Then it will scale with the element as viewport is resized.
I’ll post a demo later on as I have it half coded now. You don’t need to repeat everything and you don’t need the additional containers.
Its dinner time now but I will post a demo later
Ok I’ve coded the first two so you can just follow the sequence for the rest of them. Just copy the changes using image2, image4 etc as I have done for image 1 & 2.
You will need to change the horizontal position for the remaining two on the top row and then for the bottom row you change the vertical position and match the horizontal position of the one above.
I’ll try and code a few more so you can check if you have followed correctly. You may need to tweak positions slightly but the method seems to be working for me even on resize.
Phew
Here it is in all its glory
Have fun
WOW! this is a great job Paul, you are fantastic, 
I would never have come to this solution without your help.
Now I have to pause for a moment on this code to understand how you did all this. 
I don’t have words to express my gratitude for what you have done, you are great. 
Thank you so much
Alberto
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
