Stack Overflow
Stack Overflow

Questions tagged [card-flip]

14 questions
8
votes
3 answers

CSS Card Flip in Safari

I'm trying to get a CSS card flip to work on all browsers. I've gotten it to work on everything except Safari. I've used this code: /* entire container, keeps perspective */ .flip-container { perspective: 1000; transform-style:…
Calle
  • 185
  • 1
  • 2
  • 8
3
votes
2 answers

Card flip animation for one item in a gridview

So i am making an app for a restaurant that displays items using a gridview each item view have one button used to buy the meal and 3 textviews and imageview to display the meal image and its name , details and price . What am trying to do here is a…
Amr Abd-Alkrim
  • 354
  • 5
  • 12
3
votes
2 answers

CSS Card Flip Glitch (Padding? Margin?)

I'm trying to create an interactive calendar. I've added a neat CSS Card Flip animation (tutorial here) to flip a calendar date and display more information on the back of the card. Problem if you hover your mouse over the dates, for some reason…
ipiyale
  • 57
  • 1
  • 8
3
votes
1 answer

TweenMax Flip Card

I just heard about GSAP today and played around with it for like 6 hours (which is AWESOME by the way!) I got all of it working except when I want to flip a card, the back side of it doesn't appear, I've searched all over the net seeking for a post…
Amin Jafari
  • 7,157
  • 2
  • 18
  • 43
1
vote
1 answer

JS: How to get multiple cards to flip on website?

Hi so I found this card flip animation https://codepen.io/desandro/pen/LmWozd and I decided to style it for my website. I intend to have a bunch of these cards (1 for each letter of the alphabet). However right now the code does not work for more…
lauren
  • 33
  • 2
1
vote
1 answer

React Card Flip bug - Safari - Card not resizing as expected after flip

I'm building an app that has the ability to flip cards, and as you hover over a card, the focused card should resize to 30vw, while the other cards resizes to 15vw. When you hover off of all the cards, they should all go back to their original…
Pinny
  • 43
  • 5
1
vote
1 answer

Safari CSS issue with overlayed animations

I have a simple card flip animation which works well on the browsers I've tested. However there is an issue on Safari when this card flip animation happens on top of another div which is also being animated. For some reason on Safari when the card…
Daniel Grima
  • 2,765
  • 7
  • 34
  • 58
1
vote
1 answer

css/javascript multiple card flip: reset other cards

So I'm currently using this one: http://jsfiddle.net/nawdpj5j/10/ Now what I need is that when I flip one card (doesn't matter which one) and then flip another one the first one resets/turnes back. I think I need to add something in here: var init =…
Louis
  • 11
  • 1
1
vote
1 answer

Card flip animation on PopupWindow or DialogFragment

I am trying to apply card flip animation on ViewGroup inside PopupWindow. I am using AnimatorSet to apply animation over ViewGroup. Animation is happening within the bounds of the window. And part of window going out of window bounds are clipping.…
Swaroop
  • 532
  • 1
  • 4
  • 16
0
votes
0 answers

maximum 2 cards to rotate

I writing the card flipping game. But i need to help. i have 36 piece card (front & rear faces). 36 of them can be opened, but I only want to open 2 and close if not compatible. .java card2.setOnFlipListener( new…
Enes YAĞCI
  • 1
  • 1
0
votes
1 answer

Card flip Javascript from more than one set

I am making a card-flip game in javascript, and would like to be able to pull out different sets of cards. In the data.js file I have 2 arrays, one for cards in one language, and one for cards in another: const cardsItalian = [{ name: "Cane…
stesand
  • 13
  • 3
0
votes
0 answers

Card-flip functionality in Django Quiz website

I am new to Django. This is technically my first project. I am building a quiz web app in Django, using tomwalker's quiz app I would like to present the questions on a card, when a user answers the question the card shall flip and show the…
Addy
  • 1
  • 1
0
votes
1 answer

Card flip Animation not looking good on Android 7 Nougat

thank you for reading my question. The problem I have only occurs in android 7.0 (Nougat) and what it's happening is that the card (a fragment with Image views) when it rotates in the animation, it suddenly crops part of the image, Look: Android 7…
Carlos Chávez
  • 19
  • 3
0
votes
1 answer

Card flip jquery flipping both cards at the same time?

This is my first time attempting card flip coding. I got it to work, but now I have two things I'd like to do that I can't get: I want each card to flip separately when the respective card is clicked. I'd like for the image card to be mobile…
Jennifer Mejia
  • 25
  • 6