/    Sign up×
Community /Pin to ProfileBookmark

Does FireFox not support a card flip effect?

Why this code does not work in FireFox?
It also doesn’t work on Edge.

[code].business-card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.card-container {
position: relative;
width: 188px;
height: 340px;
perspective: 700px;
margin: 15px;
}
.card {
position: absolute;
height: 100%;
width: 100%;
transform-style: preserve-3d;
transition: all 400ms ease-in-out;
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
}

.back {
transform: rotateY(-180deg);
}

.tap-turn {
transform: rotateY(-180deg);
}[/code]

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERJul 19.2019 — Is this what you are trying to accomplish?

See: https://www.w3schools.com/howto/howto_css_flip_image.asp

See the 3-D flip portion of the link.
Copy linkTweet thisAlerts:
@codyhillauthorJul 19.2019 — @JMRKER#1606499 Nope. https://relaxed-swirles-9b73a7.netlify.com/design.html On business cards. On fireFox and Edge doesn't seem to work.
Copy linkTweet thisAlerts:
@SempervivumJul 19.2019 — The business cards are flipping fine for me in FF and Edge. In edge a bit uneven. Might there be a cache issue?
Copy linkTweet thisAlerts:
@codyhillauthorJul 20.2019 — @Sempervivum#1606505 The business card needs to have a front and back. On FireFox and Edge, they have only the back. At leaset, for me, they have only the back.
Copy linkTweet thisAlerts:
@SempervivumJul 20.2019 — @RaulRogojan#1606526 I see! Going to look into ...
Copy linkTweet thisAlerts:
@SempervivumJul 20.2019 — The solution can be found here:

https://davidwalsh.name/css-flip

Adding `backface-visibility: hidden;` to .front and .back fixes it.
Copy linkTweet thisAlerts:
@codyhillauthorJul 20.2019 — @Sempervivum#1606528 sweet, thanks!
Copy linkTweet thisAlerts:
@albertobellomiSep 13.2020 — Hi,

I have a similar problem with this flip card "https://codepen.io/albertobellomi/pen/GRZobqw":

  • 1. back card with the text doesn't rotate (180deg) as it should (in all browsers).


  • 2. the background of the back face card doesn't turn 180° to merge with background (body) below, this only happens in Firefox, while in the other browsers this work fine.


  • Do you have any solution that I am missing?
    ×

    Success!

    Help @codyhill spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 3.28,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...